Angular集成Firebase时AngularFireModule.initialize引发NG0203错误

问题重现 #

学习Angular并搭建与Firebase的集成环境时，运行出现错误：

NG0203: inject()必须从构造函数等注入上下文中调用...

当前代码依赖Firebase的compat路径，移除该路径会触发编译错误；移除自定义的Initialize方法后，运行时问题依然存在。

核心原因 #

这个错误本质是在Angular依赖注入上下文之外调用了inject()函数或依赖注入相关逻辑。常见场景是在普通函数、类的非构造方法中直接初始化Firebase服务，未通过Angular的注入机制获取实例。

正确的集成步骤 #

1. 确保版本兼容 #

先确认@angular/fire和firebase版本匹配，建议用命令安装对应版本：

npm install @angular/fire firebase@<兼容版本号>

（可参考AngularFire官方文档确认版本对应关系）

2. 正确配置Firebase模块 #

在核心模块（如app.module.ts）中通过forRoot初始化AngularFire模块，不要在自定义方法中手动调用：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth'; // 按需导入其他模块
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule // 示例：导入认证模块
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 组件/服务中正确注入Firebase服务 #

不要在Initialize这类普通方法中直接初始化服务，通过构造函数注入后再使用：

import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private afAuth: AngularFireAuth) {
    // 可在此处执行初始化逻辑，比如监听用户状态
    this.afAuth.authState.subscribe(user => {
      console.log('用户状态变化:', user);
    });
  }

  // 错误示例：禁止在普通方法中直接调用依赖注入相关逻辑
  // initialize() {
  //   const auth = getAuth(); // 或直接使用inject()，会触发NG0203
  // }
}

4. 移除compat路径的正确方式（避免编译错误） #

若想升级到Firebase模块化API（移除compat），需按以下步骤操作：

• 安装最新版兼容的@angular/fire和firebase（要求Angular 14+）
• 重构模块导入为模块化方式：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideAuth, getAuth } from '@angular/fire/auth';

@NgModule({
  imports: [
    BrowserModule,
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideAuth(() => getAuth())
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 在组件/服务中通过构造函数或inject()获取实例：

import { Component, inject } from '@angular/core';
import { Auth, user } from '@angular/fire/auth';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  private auth = inject(Auth);
  user$ = user(this.auth);

  // 也可通过构造函数注入
  // constructor(private auth: Auth) {}
}

关键注意点 #

• 禁止在非注入上下文（普通函数、事件回调、静态方法等）中使用inject()或直接初始化Firebase服务，必须通过构造函数注入获取实例。
• 若需在非构造方法中处理逻辑，先在构造函数中注入服务并保存为类属性，再在方法中调用该属性。

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