Angular 17与AngularFire 17独立模式注入令牌缺失错误求助

问题背景 #

不熟悉Angular 17默认的无app.module.ts独立模式，在使用AngularFire时遇到依赖注入错误，提示找不到InjectionToken angularfire2.app.options的提供者。

当前配置代码 #

app.config.ts #

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes), 
    provideAnimations(), 
    importProvidersFrom(provideFirebaseApp(() => initializeApp(environment.firebase))),  
    importProvidersFrom(provideAuth(() => getAuth())), 
    importProvidersFrom(provideAnalytics(() => getAnalytics())), 
    ScreenTrackingService, UserTrackingService, 
    importProvidersFrom(provideFirestore(() => getFirestore())), 
    importProvidersFrom(provideStorage(() => getStorage())),
    importProvidersFrom(AngularFireModule),
    importProvidersFrom(AngularFireAuthModule),
    importProvidersFrom(AngularFirestoreModule),
    importProvidersFrom(AngularFireStorageModule),
    importProvidersFrom(AngularFireDatabaseModule),
  ]
};

auth.service.ts #

import { Injectable, NgZone, isDevMode } from '@angular/core';
import { User } from '../services/user';
import * as auth from 'firebase/auth';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import {
  AngularFirestore,
  AngularFirestoreDocument,
} from '@angular/fire/compat/firestore';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})

export class AuthService {
  userData: any; 
  constructor(
    public afs: AngularFirestore, 
    public afAuth: AngularFireAuth,
    public router: Router,
    public ngZone: NgZone    
  ) {
    // ... 服务逻辑
  }
}

组件使用代码 #

export class SignupComponent {
  
  constructor(
    public authService: AuthService
  ) { }
}

错误信息 #

ERROR – NullInjectorError: R3InjectorError(Standalone[_AppComponent])[_AuthService -> _AuthService -> _AngularFirestore -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: 
  NullInjectorError: No provider for InjectionToken angularfire2.app.options!
NullInjectorError: R3InjectorError(Standalone[_AppComponent])[_AuthService -> _AuthService -> _AngularFirestore -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: 

package.json 依赖版本 #

"dependencies": {
  "@angular/animations": "^17.0.0",
  "@angular/common": "^17.0.0",
  "@angular/compiler": "^17.0.0",
  "@angular/core": "^17.0.0",
  "@angular/fire": "^17.0.1",
  "@angular/forms": "^17.0.0",
  "@angular/platform-browser": "^17.0.0",
  "@angular/platform-browser-dynamic": "^17.0.0",
  "@angular/platform-server": "^17.0.0",
  "@angular/router": "^17.0.0",
  "@angular/ssr": "^17.0.9",
  "express": "^4.18.2",
  "firebase": "^10.7.1",
  "rxjs": "~7.8.0",
  "tslib": "^2.3.0",
  "zone.js": "~0.14.2"
},

解决方案 #

问题核心是混用了AngularFire新独立模式API和旧兼容模块，导致配置冲突：旧compat模块需要通过AngularFireModule.initializeApp()提供配置，而你仅用新的provideFirebaseApp初始化，但未给旧模块传入配置，因此出现找不到angularfire2.app.options的错误。

修正方案二选一： #

方案1：继续使用旧compat模块（适配现有代码）

修改app.config.ts，将单独的importProvidersFrom(AngularFireModule)替换为带初始化配置的版本：

// 移除这一行
// importProvidersFrom(AngularFireModule),
// 替换为
importProvidersFrom(AngularFireModule.initializeApp(environment.firebase)),

其余旧模块的importProvidersFrom保留，确保compat模块能获取到Firebase配置。

方案2：迁移到AngularFire独立API（推荐，符合Angular 17最佳实践）

• 修改auth.service.ts：弃用compat模块，改用新的Firebase原生API和AngularFire独立服务：

  import { Injectable, NgZone, isDevMode } from '@angular/core';
  import { User } from '../services/user';
  import { Auth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from 'firebase/auth';
  import { Firestore, doc, setDoc } from 'firebase/firestore';
  import { Router } from '@angular/router';
  
  @Injectable({
    providedIn: 'root'
  })
  export class AuthService {
    userData: any; 
    constructor(
      private firestore: Firestore, 
      private auth: Auth,
      private router: Router,
      private ngZone: NgZone    
    ) {
      // 服务逻辑改用新API实现
    }
  }
  

• 修改app.config.ts：移除所有旧AngularFire*Module的导入，仅保留新独立API配置：

  export const appConfig: ApplicationConfig = {
    providers: [
      provideRouter(routes), 
      provideAnimations(), 
      provideFirebaseApp(() => initializeApp(environment.firebase)),  
      provideAuth(() => getAuth()), 
      provideAnalytics(() => getAnalytics()), 
      ScreenTrackingService, UserTrackingService, 
      provideFirestore(() => getFirestore()), 
      provideStorage(() => getStorage()),
      // 移除所有AngularFire*Module相关配置
    ]
  };
  

内容的提问来源于stack exchange，提问作者Pung Worathiti Manosroi