Angular构造函数注入AngularFireDatabase出现NG0203错误求助

出现错误提示：

Error: NG0203: inject() must be called from an injection context such as a constructor

错误出现在组件构造函数中，但按提示构造函数本应属于注入上下文。注释掉构造函数后错误消失，问题定位到AngularFireDatabase注入环节。

组件代码 #

import { Component } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/compat/database'


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  courses!: any[];

  constructor(db: AngularFireDatabase){
  //   db.list('/courses').valueChanges()
  //     .subscribe(courses => {
  //       this.courses = courses;
  //       console.log(this.courses)
  //     })
  }
} 

应用模块代码 #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

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

import { FIREBASE_OPTIONS } from '@angular/fire/compat';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
import { environment } from '../environments/environment';

import { provideFirebaseApp, initializeApp } from '@angular/fire/app'


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    AngularFireDatabaseModule
  ],
  providers: [
    {
      provide: FIREBASE_OPTIONS, useValue: environment.firebase
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

问题原因及解决方法 #

• 混合初始化方式冲突
  你同时使用了AngularFire v7+新的provideFirebaseApp初始化方式，又手动配置了旧版的FIREBASE_OPTIONS提供者，导致注入上下文混乱。v7+版本无需手动提供FIREBASE_OPTIONS，新初始化方式会自动处理。

• 修正模块配置
  修改AppModule，移除providers中的FIREBASE_OPTIONS配置，并添加数据库的新提供者：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  
  import { AppComponent } from './app.component';
  
  import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
  import { environment } from '../environments/environment';
  
  import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
  import { provideDatabase, getDatabase } from '@angular/fire/database';
  
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      provideFirebaseApp(() => initializeApp(environment.firebase)),
      provideDatabase(() => getDatabase()), // 添加新的数据库提供者
      AngularFireDatabaseModule
    ],
    providers: [], // 移除旧的FIREBASE_OPTIONS配置
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• 版本兼容性检查
  确保Angular版本与AngularFire版本匹配：AngularFire v7+需要Angular 14及以上版本，版本不匹配也会引发注入异常。

• 清理缓存重新构建
  执行以下命令清理编译缓存，避免旧文件干扰：

  ng clean
  npm install
  ng serve
  

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