角火 - 没有提供者的注射式供应商（AngularFire2.App.Options）

Question

Context

我正在与

离子和角和角火与火base工作一起工作。我已经建立了与firestore数据库的cuccessfull连接，并且能够操纵数据。 规定

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

Implementations

app.module.ts

import { environment } from '../environments/environment';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';

@NgModule({
    ...
    imports: [
      ...
      provideFirebaseApp(
          () => initializeApp(environment.firebaseConfig)), 
          provideAuth(() => getAuth()), 
          provideFirestore(() => getFirestore(),
      ),
    ],
    ...
})

现在我正在研究googleauthentication的整合。为此，我一直在遵循

角火存储库

，当然还有

角火 - 身份验证文档

。在哪里缩写了实施的内容（就像文档一样）： login.page.ts

import { AuthenticationService } from 'src/app/services/authentication.service';

export class LoginPage implements OnInit {
    
    constructor(private authenticationSvc: AuthenticationService) { }

    login() { this.authenticationSvc.login(); }
}

suthentication.service.ts

import { AngularFireAuth } from '@angular/fire/compat/auth';
import firebase from 'firebase/compat/app';

export class AuthenticationService {

    constructor(private auth: AngularFireAuth) { }

    login() { this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()); }
}

问题
如果我在

login.page.ts

上使用authentication.ts，请放置。浏览器控制台输出以下错误：

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

solution 在文件中app.module.ts添加以下提供商对象：

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

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

Answer 1

对于以后的版本，使用或至少doubleCheck正确的对象名称，即环境。

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


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

update:: for Angular>19 Angular> 19：用firebase集成的无nullinjectorError修复 当将firebase与Angular App版本19或以上集成时，您可能会遇到以下错误：

NullInjectorError: R3InjectorError(...)[AngularFirestore -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]:
NullInjectorError: No provider for InjectionToken angularfire2.app.options!

Answer 2

解决方案 在Angular 19及以后，Firebase需要通过app.config.ts文件中的firebase_options令牌明确提供配置。

import { ApplicationConfig } from '@angular/core';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';
import { FIREBASE_OPTIONS } from '@angular/fire/compat';
import { firebaseConfig } from './environment';

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: FIREBASE_OPTIONS, useValue: firebaseConfig }, // Provide Firebase config here
    provideFirebaseApp(() => initializeApp(firebaseConfig)),
    provideFirestore(() => getFirestore()),
  ],
};