Angular 16+Firebase13出现NullInjectorError: Firestore无提供者错误

错误信息 #

NullInjectorError: R3InjectorError(Standalone[AddEditComponent])[DataService -> DataService -> DataService -> DataService -> Firestore -> Firestore]: NullInjectorError: No provider for Firestore!

相关代码片段 #

add-edit.component.ts #

import { Component } from '@angular/core';
import { DataService } from '../services/data.service';
..........
import { FirestoreModule } from '@angular/fire/firestore';
import { FirebaseAppModule } from '@angular/fire/app';

@Component({
  templateUrl: 'add-edit.component.html',
  standalone: true,
  imports: [
.......
    FirestoreModule,
    FirebaseAppModule,
],
})
export class AddEditComponent implements OnInit {

  constructor(
......
    public dataService: DataService
  ) {}

  addUser(
    firstName: string | undefined,
    lastName: string | undefined,
    email: string | undefined,
  ) {
    this.dataService.createUser(
      firstName,
      lastName,
      email,
    );
  }
}

app.module.ts #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
.......
import { environment } from '@environments/environment';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { provideFirestore, getFirestore, FirestoreModule} from '@angular/fire/firestore';

@NgModule({
  imports: [
......
    BrowserModule, FormsModule,
    FirestoreModule,
    provideFirestore(() => getFirestore()),
    provideFirebaseApp(() => initializeApp(environment.firebase)),
  ],
  providers: [
    { provide: NgChartsConfiguration, useValue: { generateColors: false } },
  ],
})
export class AppModule {}

data.service.ts #

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

@Injectable({
  providedIn: 'root',
})
export class DataService {

  constructor(public firestore: Firestore) {}

  async createUser(firstName?: string, lastName?: string, email?: string) {
    const docRef = await addDoc(collection(this.firestore, 'users'), {
      email: email,
      firstName: firstName,
      lastName: lastName,
    });
    console.log('Document written with ID: ', docRef.id);
  }
}

environment.ts #

export const environment = {
  apiUrl: 'http://localhost:4200',
  firebase: {
    apiKey: '...',
    authDomain: '....firebaseapp.com',
    databaseURL: 'https://.....firebasedatabase.app',
    projectId: '...',
    storageBucket: '.....appspot.com',
    messagingSenderId: '.....',
    appId: '...',
    measurementId: '....',
  },
};

解决方案 #

1. 修正AppModule中的Firebase配置顺序与导入 #

Angular Fire v13+采用提供者函数配置，且Firebase App初始化必须优先于Firestore配置。同时移除冗余的FirestoreModule导入：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { environment } from '@environments/environment';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';

@NgModule({
  imports: [
    BrowserModule, 
    FormsModule,
    // 先初始化Firebase App
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    // 再配置Firestore
    provideFirestore(() => getFirestore()),
  ],
  providers: [
    { provide: NgChartsConfiguration, useValue: { generateColors: false } },
  ],
})
export class AppModule {}

2. 移除独立组件中的冗余Firebase模块导入 #

独立组件无需导入FirestoreModule和FirebaseAppModule，根模块的全局配置已足够支持服务注入：

import { Component } from '@angular/core';
import { DataService } from '../services/data.service';

@Component({
  templateUrl: 'add-edit.component.html',
  standalone: true,
  imports: [
    // 保留其他必要导入，移除FirestoreModule和FirebaseAppModule
    .......
  ],
})
export class AddEditComponent implements OnInit {

  constructor(
    ......
    public dataService: DataService
  ) {}

  addUser(
    firstName: string | undefined,
    lastName: string | undefined,
    email: string | undefined,
  ) {
    this.dataService.createUser(
      firstName,
      lastName,
      email,
    );
  }
}

问题原因 #

• Angular Fire v13+弃用了传统的模块导入配置方式，改用provideFirebaseApp、provideFirestore等提供者函数，旧模块导入会导致配置不生效。
• 原配置中Firestore初始化优先于Firebase App，导致Firestore无法找到已初始化的App实例，无法创建依赖提供者。
• 独立组件导入Firebase模块属于冗余操作，根模块的全局配置已能让服务在组件中正常注入。

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