Angular独立组件NullInjectorError：Firestore无提供者问题求助

这个错误的核心原因是Firestore的依赖提供者未被注册到Angular的注入器中，由于你使用的是独立组件（standalone: true），依赖注入的配置逻辑和传统NgModule模式略有不同，以下是针对性的修复步骤：

1. 确认Firebase初始化配置 #

根据你的项目模式（纯独立组件/混合NgModule）选择对应配置：

纯独立组件应用（无AppModule） #

在main.ts中通过bootstrapApplication注册Firebase服务提供者：

import { bootstrapApplication } from '@angular/platform-browser';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';
import { ReservarPage } from './path/to/reservar.page';
import { environment } from './environments/environment';

bootstrapApplication(ReservarPage, {
  providers: [
    // 初始化Firebase App
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    // 注册Firestore提供者
    provideFirestore(() => getFirestore()),
  ]
});

混合模式（存在AppModule） #

如果你的项目仍保留AppModule，需在模块中导入Angular Fire的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 { ReservarPage } from './reservar/reservar.page';

@NgModule({
  declarations: [/* 声明非独立组件 */],
  imports: [
    BrowserModule,
    // 初始化Firebase
    AngularFireModule.initializeApp(environment.firebaseConfig),
    // 导入Firestore模块以注册提供者
    AngularFirestoreModule,
    // 直接导入独立组件
    ReservarPage
  ],
  bootstrap: [/* 根组件 */]
})
export class AppModule { }

2. 检查自定义Firestore服务的注入配置 #

假设你有处理预约的ReservaService，确保服务的注入范围配置正确：

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

@Injectable({
  providedIn: 'root' // 全局根注入器提供，全应用可直接注入
})
export class ReservaService {
  constructor(private firestore: Firestore) {}

  async guardarReserva(datosReserva: any) {
    const coleccionRef = collection(this.firestore, 'reservas');
    return await addDoc(coleccionRef, datosReserva);
  }
}

如果不使用providedIn: 'root'，则必须在独立组件的providers数组中显式声明该服务：

@Component({
  selector: 'app-reservar',
  templateUrl: './reservar.page.html',
  styleUrls: ['./reservar.page.scss'],
  standalone: true,
  imports: [ReactiveFormsModule], // 若使用表单需导入
  providers: [ReservaService] // 显式注册服务
})
export class ReservarPage { /* ... */ }

3. 组件内的依赖注入验证 #

在ReservarPage中确保正确注入服务，并在按钮点击事件中调用保存方法：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ReservaService } from '../services/reserva.service';

@Component({
  selector: 'app-reservar',
  templateUrl: './reservar.page.html',
  styleUrls: ['./reservar.page.scss'],
  standalone: true,
  imports: [ReactiveFormsModule]
})
export class ReservarPage {
  formularioReserva: FormGroup;

  constructor(
    private fb: FormBuilder,
    private reservaService: ReservaService
  ) {
    this.formularioReserva = this.fb.group({
      nombre: ['', Validators.required],
      fecha: ['', Validators.required],
      hora: ['', Validators.required]
    });
  }

  async onReservar() {
    if (this.formularioReserva.invalid) return;
    
    try {
      await this.reservaService.guardarReserva(this.formularioReserva.value);
      this.formularioReserva.reset();
      // 可添加成功提示逻辑
    } catch (error) {
      console.error('Error al guardar reserva:', error);
      // 错误处理逻辑
    }
  }
}

4. 常见排查点 #

• 版本兼容性：确保Angular与Angular Fire版本匹配（如Angular 16+对应Angular Fire 7.6+）
• 避免重复注册：不要同时在main.ts和AppModule中重复配置Firebase服务
• 表单模块导入：若使用响应式表单，独立组件必须显式导入ReactiveFormsModule

内容的提问来源于stack exchange，提问作者José Manuel Ruíz Bolaños