Angular12集成@angular/fire7出现DI循环依赖与NullInjectorError报错

根因说明 #

你当前混用了@angular/fire 7.x的两种兼容模式：配置用了适配Firebase 9的新版模块化提供器API，但是组件注入的是旧兼容层的AngularFireAuth类，两种模式不兼容才会触发依赖注入不存在、循环依赖的报错。

两种可选解决方案 #

方案1：统一使用新版模块化API（推荐，可获得更好的打包体积优化） #

• 保持现有AppModule中provideFirebaseApp、provideAuth的配置不变
• 修改组件的导入和注入逻辑：
  1. 导入新版依赖：

  import { AUTH } from '@angular/fire/auth';
  import { Auth } from 'firebase/auth';
  import { Inject } from '@angular/core';
  

  2. 替换构造函数注入内容：

  constructor(@Inject(AUTH) public auth: Auth) {}
  

  3. 后续认证逻辑直接调用firebase/auth提供的模块化方法即可，无需再通过AngularFireAuth封装的方法调用。

方案2：统一使用旧版兼容模式（适配原有老代码写法） #

• 删掉AppModule中现有provideFirebaseApp、provideAuth的配置，替换为旧版NgModule导入：

  // 顶部导入
  import { AngularFireModule } from '@angular/fire/compat';
  import { AngularFireAuthModule } from '@angular/fire/compat/auth';
  
  // imports数组配置
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    // 其他原有模块
  ]
  

• 组件中保持public auth: AngularFireAuth的注入逻辑不变，注意AngularFireAuth需要从@angular/fire/compat/auth路径导入。

额外检查项 #

• 不要混用@angular/fire/xxx和@angular/fire/compat/xxx两种前缀的导入路径，全项目统一用其中一种即可
• 确认你的Angular 12小版本不低于12.2.0，更低版本对@angular/fire 7的新API支持存在缺陷

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