为何仅在浏览器控制台出现Angular Injector注入错误？

这个NullInjectorError的核心原因是AngularFire的Firestore模块未在根模块（AppModule）中正确导入和初始化，导致Angular的依赖注入容器无法找到Firestore的实例。以下是具体解决步骤：

1. 确认依赖安装（如未安装） #

确保已安装@angular/fire和firebase依赖：

npm install @angular/fire firebase

2. 配置AppModule #

在app.module.ts中导入并初始化AngularFire及Firestore模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';
import { PickComponent } from './pick/pick.component'; // 替换为你的组件实际路径

@NgModule({
  declarations: [
    AppComponent,
    PickComponent
  ],
  imports: [
    BrowserModule,
    // 用Firebase环境配置初始化AngularFire
    AngularFireModule.initializeApp(environment.firebase),
    // 导入Firestore模块，enablePersistence可选，用于离线数据支持
    AngularFirestoreModule.enablePersistence()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 检查Firebase环境配置 #

确保src/environments/environment.ts中有正确的Firebase项目配置（从Firebase控制台获取）：

export const environment = {
  production: false,
  firebase: {
    apiKey: "你的API_KEY",
    authDomain: "你的AUTH_DOMAIN",
    projectId: "你的PROJECT_ID",
    storageBucket: "你的STORAGE_BUCKET",
    messagingSenderId: "你的SENDER_ID",
    appId: "你的APP_ID"
  }
};

4. 组件代码优化（可选） #

如果使用AngularFire v7+的模块化API，推荐使用inject替代构造函数注入（原代码的构造函数注入也可正常工作）：

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

export class PickComponent {
  private fs = inject(Firestore);

  addData(f: any) {
    const fpicks = collection(this.fs, 'users');
    // 建议添加Promise的then/catch处理错误
    addDoc(fpicks, f.value)
      .then(() => console.log('数据添加成功'))
      .catch(err => console.error('添加失败:', err));
    console.log(f.value);
  }
}

完成以上步骤后，重启开发服务器即可解决注入报错问题。

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