Angular Fire - 没有 InjectionToken 的提供者（angularfire2.app.options）

Question

语境

\n

我正在使用Ionic & Angular & Angular Fire & Firebase。我已经成功连接到Firestore 数据库，并且能够操作数据。

\n

规格

\n

   Ionic CLI                     : 6.18.1\n   Ionic Framework               : @ionic/angular 6.0.11\n   @angular-devkit/build-angular : 13.2.6\n   @angular-devkit/schematics    : 13.2.6\n   @angular/cli                  : 13.2.6\n   @ionic/angular-toolkit        : 6.1.0\n   @angular/angularfire          : 7.2.1 \n

\n

实施

\n

应用程序模块.ts

\n

import { environment } from \'../environments/environment\';\nimport { initializeApp, provideFirebaseApp } from \'@angular/fire/app\';\nimport { provideAuth, getAuth } from \'@angular/fire/auth\';\nimport { provideFirestore, getFirestore } from \'@angular/fire/firestore\';\n\n@NgModule({\n    ...\n    imports: [\n      ...\n      provideFirebaseApp(\n          () => initializeApp(environment.firebaseConfig)), \n          provideAuth(() => getAuth()), \n          provideFirestore(() => getFirestore(),\n      ),\n    ],\n    ...\n})\n

\n

现在我正在致力于谷歌身份验证的集成。为此，我一直在关注Angular Fire 存储库，当然还有Angular Fire 身份验证文档。哪里是实现内容的缩写（就像文档一样）：

\n

登录.page.ts

\n

import { AuthenticationService } from \'src/app/services/authentication.service\';\n\nexport class LoginPage implements OnInit {\n    \n    constructor(private authenticationSvc: AuthenticationService) { }\n\n    login() { this.authenticationSvc.login(); }\n}\n

\n

认证.service.ts

\n

import { AngularFireAuth } from \'@angular/fire/compat/auth\';\nimport firebase from \'firebase/compat/app\';\n\nexport class AuthenticationService {\n\n    constructor(private auth: AngularFireAuth) { }\n\n    login() { this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()); }\n}\n

\n

问题

\n

简而言之，如果我在Login.page.ts上使用Authentication.service.ts，应用程序将不再工作。浏览器控制台输出以下错误：

\n

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(LoginPageModule)[AuthenticationService -> AuthenticationService -> AngularFireAuth -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: \n  NullInjectorError: No provider for InjectionToken angularfire2.app.options!\nNullInjectorError: R3InjectorError(LoginPageModule)[AuthenticationService -> AuthenticationService -> AngularFireAuth -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: \n  NullInjectorError: No provider for InjectionToken angularfire2.app.options!\n    at NullInjector.get (core.mjs:11120:1)\n    at R3Injector.get (core.mjs:11287:1)\n    at R3Injector.get (core.mjs:11287:1)\n    at R3Injector.get (core.mjs:11287:1)\n    at injectInjectorOnly (core.mjs:4765:1)\n    at Module.\xc9\xb5\xc9\xb5inject (core.mjs:4769:1)\n    at Object.AngularFireAuth_Factory [as factory] (angular-fire-compat-auth.js:126:1)\n    at R3Injector.hydrate (core.mjs:11457:1)\n    at R3Injector.get (core.mjs:11276:1)\n    at injectInjectorOnly (core.mjs:4765:1)\n    at resolvePromise (zone.js:1262:1)\n    at resolvePromise (zone.js:1216:1)\n    at zone.js:1329:1\n    at _ZoneDelegate.push.6084._ZoneDelegate.invokeTask (zone.js:443:1)\n    at Object.onInvokeTask (core.mjs:25535:1)\n    at _ZoneDelegate.push.6084._ZoneDelegate.invokeTask (zone.js:442:1)\n    at Zone.push.6084.Zone.runTask (zone.js:214:1)\n    at drainMicroTaskQueue (zone.js:632:1)\n

\n

Answer 1

解决方案

在文件app.module.ts上添加以下提供程序对象：

import { FIREBASE_OPTIONS } from '@angular/fire/compat';

@NgModule({
    ...
    providers: [
        { provide: FIREBASE_OPTIONS, useValue: environment.firebaseConfig }
    ],
})

所有道具都转到@Saumya 回答这个问题。