Angular 18 + AngularFire 18.0.1初始化组件时出现NullInjectorError

核心原因 #

你的Angular 18项目大概率采用了默认的Standalone组件启动模式，但你在AppModule中配置的AngularFire模块并未被加载，导致Firebase的配置提供者未注入到应用中，进而引发AngularFireDatabase初始化时找不到所需令牌的错误。

解决方案 #

方案1：切换回NgModule根模块启动

修改main.ts，使用模块启动方式替代Standalone模式：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

这种方式下，你现有AppModule中的AngularFire配置会正常生效。

方案2：在Standalone模式下正确配置AngularFire

如果坚持使用Standalone组件，直接在bootstrapApplication的providers中导入AngularFire相关模块的提供者：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
import { environment } from './environments/environment';

bootstrapApplication(AppComponent, {
  providers: [
    ...AngularFireModule.initializeApp(environment.firebaseConfig).providers,
    ...AngularFireDatabaseModule.providers
  ]
});

同时可以删除未被使用的AppModule文件，避免混淆。

额外检查项 #

• 确认environment.ts中的Firebase配置（apiKey、authDomain、databaseURL等）完整且无拼写错误。
• 执行npm list firebase检查版本兼容性：AngularFire 18.0.1需搭配Firebase 10.x或11.x版本，不兼容则执行npm install firebase@latest更新。
• 确保组件中注入FirebaseService的方式正确，未重复在组件级别的providers中声明该服务。

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