Ionic项目用Angular12+AngularFire v9实时数据库报NullInjectorError如何解决

错误根因 #

你遇到的NullInjectorError是因为InjectionToken angularfire2.app.options没有被正确注入，本质是Angular Fire 7.x兼容层的初始化配置缺失、必填字段漏填，或者依赖导入顺序错误导致的。

修复步骤 #

• 首先确认你在app.module.ts中正确配置了完整的firebaseConfig对象，该对象可从Firebase控制台项目设置页复制，使用实时数据库必须额外配置databaseURL字段，示例结构如下：

// 该配置可以直接写在app.module.ts里，也可以从单独的配置文件导入
const firebaseConfig = {
  apiKey: "你的项目apiKey",
  authDomain: "你的项目authDomain",
  databaseURL: "你的实时数据库URL", // 实时数据库必填字段，很多人漏加触发注入错误
  projectId: "你的项目projectId",
  storageBucket: "你的项目storageBucket",
  messagingSenderId: "你的项目messagingSenderId",
  appId: "你的项目appId"
};

• 修正app.module.ts的导入逻辑，确保AngularFireModule初始化放在其他Firebase相关模块之前：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

// Firebase相关导入
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';

// 导入上面定义的firebaseConfig
const firebaseConfig = {
  // 替换为你自己的项目配置
};

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    // 确保Firebase初始化在最前面
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

优化数据服务代码 #

你当前手动包装Promise的写法存在内存泄漏风险，可以用RxJS官方工具简化，同时确认服务的注入范围正确：

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/compat/database';
import { firstValueFrom } from 'rxjs';

// 确保服务是根注入，或者你在对应模块的providers数组里声明了该服务
@Injectable({
  providedIn: 'root'
})
export class SBDataService {
  constructor(public db: AngularFireDatabase) { }

  async getVendor(){
    try {
      // 取完第一个值自动销毁订阅，避免内存泄漏
      return await firstValueFrom(this.db.object("config").valueChanges());
    } catch (err) {
      console.log("hitting error:" + err);
      throw err;
    }
  }
}

可选兜底处理 #

如果完成上述配置后仍报错，删除项目根目录的node_modules文件夹、package-lock.json文件，重新执行npm install安装依赖，清除缓存导致的注入异常。
你当前的依赖版本组合（Angular 12.x + Angular Fire 7.2.x + Firebase 9.5.x）没有兼容性问题，不需要降级依赖。

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