AngularFire注入报错NullInjectorError: No provider for angularfire2.app.options求助

问题核心原因 #

你使用的AngularFire 7.x版本同时混用了Firebase v9的模块化API注入逻辑，和@angular/fire/compat目录下的旧版兼容层服务，两者的注入体系不兼容，才会触发找不到InjectionToken angularfire2.app.options的错误。

解决方案 #

你可以二选一使用以下任意一种方案，不要混用两种API的导入和注入逻辑即可。

方案1：保留现有兼容层服务用法，修改app.module.ts配置 #

1. 移除app.module.ts中原有的模块化API导入：

// 删掉以下几行
import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { provideAuth,getAuth } from '@angular/fire/auth';
import { provideDatabase,getDatabase } from '@angular/fire/database';
import { provideFirestore,getFirestore } from '@angular/fire/firestore';

2. 新增兼容层模块导入：

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';

3. 修改@NgModule的imports数组配置，替换原有的模块化注入配置：

imports: [
  BrowserModule,
  AppRoutingModule,
  HttpClientModule,
  // 新增以下三行，替换原来的provideFirebaseApp等配置
  AngularFireModule.initializeApp(environment.firebase),
  AngularFireAuthModule,
  AngularFirestoreModule,
  FormsModule,
  ReactiveFormsModule
]

修改完成后直接启动项目即可正常运行，不需要改动login.service.ts中的原有逻辑。

方案2：全量使用新版模块化API，修改login.service.ts逻辑 #

如果你不想用兼容层，可以保持app.module.ts现有的模块化注入配置，只修改服务层代码即可：

1. 替换login.service.ts中的导入语句：

// 删掉以下两行
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { AngularFirestore } from '@angular/fire/compat/firestore';
// 新增新版API导入
import { Auth, signInWithEmailAndPassword } from '@angular/fire/auth';
import { Firestore } from '@angular/fire/firestore';

2. 修改构造函数注入和登录方法逻辑：

constructor(private auth: Auth, private router : Router,  private firestore: Firestore) {
  this.userLoggedIn = false;
}

loginUser(email: string, password: string): Promise<any> {
    return signInWithEmailAndPassword(this.auth, email,password)
      .then(() => {
          console.log('Auth Service: loginUser: success');
           this.router.navigate(['']);
      })
      .catch(error => {
          console.log('Auth Service: login error...');
          console.log('error code', error.code);
          console.log('error', error);
          if (error.code)
              return { isValid: false, message: error.message };
          else
              return { isValid: false, message : "Login Error"}
      });
}

内容的提问来源于stack exchange，提问作者VennisVenn