NullInjectorError：没有 Angular 的 Firestore 提供程序

Question

使用 Angular 和 Angular cli：16.2.12 Firebase：13.5.2，我收到此错误：

NullInjectorError：R3InjectorError（独立[AddEditComponent]）[DataService - > DataService - > DataService - > DataService - > Firestore - > Firestore]：NullInjectorError：没有Firestore提供程序！

使用以下代码中定义的 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);
 }
}

环境.ts 文件:

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

Answer 1

对我来说，我遇到了同样的错误，结果是我是从

firebase/firestore

而不是从

@angular/fire/firestore

导入的。

不确定这是否与您的问题是同一原因，但这是 Google 中错误的最重要结果之一，因此我将其发布在这里。