Setting up Firestore with Angular fire results in: NullInjectorError: R3InjectorError(HomePageModule)

Question

我可以毫无问题地在服务中设置 Firebase 实时数据库到 GitHub modular sample codes。我知道它有效，因为我可以读取、写入和监听 Firebase 中的数据变化实时数据库没有任何问题。
但是当我尝试将 Firestore 添加到项目中时，突然我的构建在控制台中出现奇怪的错误而崩溃，显示 No provider for ka!.

来自控制台的完整错误日志：

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(HomePageModule)[FirebaseService -> FirebaseService -> ka -> ka -> ka]: 
  NullInjectorError: No provider for ka!
NullInjectorError: R3InjectorError(HomePageModule)[FirebaseService -> FirebaseService -> ka -> ka -> ka]: 
  NullInjectorError: No provider for ka!
    at NullInjector.get (core.js:11100)
    at R3Injector.get (core.js:11267)
    at R3Injector.get (core.js:11267)
    at R3Injector.get (core.js:11267)
    at injectInjectorOnly (core.js:4751)
    at ɵɵinject (core.js:4755)
    at Object.FirebaseService_Factory [as factory] (ɵfac.js? [sm]:1)
    at R3Injector.hydrate (core.js:11437)
    at R3Injector.get (core.js:11256)
    at NgModuleRef.get (core.js:25365)
    at resolvePromise (zone.js:1255)
    at resolvePromise (zone.js:1209)
    at zone.js:1321
    at ZoneDelegate.invokeTask (zone.js:434)
    at Object.onInvokeTask (core.js:28692)
    at ZoneDelegate.invokeTask (zone.js:433)
    at Zone.runTask (zone.js:205)
    at drainMicroTaskQueue (zone.js:620)

我的 app.module.ts 文件：

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { ChartsModule } from 'ng2-charts';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { getDatabase, provideDatabase } from '@angular/fire/database';


import { environment } from 'src/environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    ChartsModule,
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideFirestore(() => getFirestore()),
    provideDatabase(() => getDatabase()),
    ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

我的 firebase.service.ts 服务的相关代码：

import { Injectable } from '@angular/core';
import { Database, objectVal, ref, getDatabase, set, get, onValue, onChildAdded } from '@angular/fire/database';
import { Firestore, collection, addDoc } from "firebase/firestore";

import { ChartDataSets, ChartOptions } from 'chart.js';
import { Color, Label } from 'ng2-charts';
import { Chart } from 'chart.js';

@Injectable({
  providedIn: 'root'
})
export class FirebaseService {
  constructor(
    public database: Database,
    public firestore: Firestore
    ) {
  }

  writeUserData(path, name, email) {
    set(ref(this.database, path), {
      username: name,
      email: email
    });
  }

  async writeTest(uid: string, from: string, to: string) {
    try {
      const docRef = await addDoc(collection(this.firestore, "users"), {
        first: "Ada",
        last: "Lovelace",
        born: 1815
      });
      console.log("Document written with ID: ", docRef.id);
    } catch (e) {
      console.error("Error adding document: ", e);
    }
  }
}

Answer 1

将 class FirebaseService 添加到 app.module.ts 中的提供程序数组解决了。

Answer 2

我正在使用以下方法为我的 Angular 应用程序提供 Firebase 而不会出现问题：

imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    AngularFirestoreModule,
    // ... more imports
]

这可能会解决您的问题。

Answer 3

谢谢大家的回答，但不幸的是问题出在其他地方。

仔细查看我在 service 中的导入：

import { ... } from '@angular/fire/database';
import { ... } from "firebase/firestore";

如果我将我的导入更改为此，一切正常（没有任何其他更改）：

import { ... } from '@angular/fire/database';
import { ... } from '@angular/fire/firestore';

为什么其他答案稍微不正确（但他们仍然让我走上了正确的道路）：

我不需要按照@Sham Karthik S 的建议添加任何 Providers。如果您查看 GitHub 示例代码，也没有 Providers。
我认为@mikegross 只使用 compact Angularfire。我是尝试使用 Firebase SDK 的新模块化版本。

Setting up Firestore with Angular fire results in: NullInjectorError: R3InjectorError(HomePageModule)

Setting up Firestore with Angular fire results in: NullInjectorError: R3InjectorError(HomePageModule)

firebase

angularfire

firebase-realtime-database

angular

google-cloud-firestore