Angular 18升级至19后出现NG0203环境注入器错误求助

问题原因 #

AngularFire 19适配Angular 19的新注入系统，旧的AngularFireModule.initializeApp在NgModule imports中的初始化方式，会导致inject()函数在非注入上下文被调用，触发NG0203错误。

解决步骤 #

1. 替换NgModule中的Firebase初始化方式 #

移除@NgModule imports数组中的AngularFireModule.initializeApp(firebaseConfig)和AngularFirestoreModule，改用AngularFire提供的提供者函数配置：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 导入新的Firebase提供者函数
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    // 初始化Firebase应用
    provideFirebaseApp(() => initializeApp(firebaseConfig)),
    // 配置Firestore服务
    provideFirestore(() => getFirestore())
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 验证RepositoryService的注入逻辑 #

你的RepositoryService构造器注入写法本身没问题，若需适配新API，可直接注入Firestore类替代旧的AngularFirestore：

import { Injectable } from '@angular/core';
import { Firestore, collection, addDoc } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root',
})
export class RepositoryService {
  constructor(private firestore: Firestore) { }

  // 示例：Firestore文档添加逻辑
  async addDocument(collectionName: string, data: any) {
    const colRef = collection(this.firestore, collectionName);
    return await addDoc(colRef, data);
  }
}

3. 清理项目依赖与缓存 #

执行以下命令确保依赖和构建缓存正确：

rm -rf node_modules package-lock.json
npm install
ng build --clean

关键说明 #

Angular 19对注入上下文的检查更严格，AngularFire 19优先推荐基于提供者函数的配置方式，替代旧的NgModule导入初始化，确保所有依赖注入都在合法上下文执行。

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