使用 Angular fire 设置 Firestore 会导致:NullInjectorError: R3InjectorError(HomePageModule)

Posted

技术标签:

【中文标题】使用 Angular fire 设置 Firestore 会导致:NullInjectorError: R3InjectorError(HomePageModule)【英文标题】:Setting up Firestore with Angular fire results in: NullInjectorError: R3InjectorError(HomePageModule) 【发布时间】:2021-12-24 16:10:23 【问题描述】:

我可以毫无问题地在服务中设置 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$1.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);
    
  

【问题讨论】:

【参考方案1】:

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

仔细查看我在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 只适用于紧凑型Angularfire。我是 尝试使用 Firebase SDK 的新模块化版本。

【讨论】:

【参考方案2】:

将类 FirebaseService 添加到 app.module.ts 中的 providers 数组即可解决。

【讨论】:

感谢您尝试解决此问题,但问题最终出在其他地方。检查我的答案。仍然给您+1,但会在 2 天内接受我的答复。 可以通过添加此解决方案解决问题的原因和/或文档(如果相关)来改进您的答案。 (来自评论)【参考方案3】:

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

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

这可能会解决您的问题。

【讨论】:

感谢您尝试解决此问题,但问题出在我的服务导入中。我对此添加了自己的答案(仍然给你+1,因为你的答案让我走上了正确的道路)。 有道理! gg

以上是关于使用 Angular fire 设置 Firestore 会导致:NullInjectorError: R3InjectorError(HomePageModule)的主要内容,如果未能解决你的问题,请参考以下文章

子视图初始化后 App.component.ts 中的 Angular 8+ Fire 事件

在 VScode 中找不到 @angular/fire/firestore 模块错误

使用@angular/fire@6.0.3 无法访问firebase.firestore.FieldValue.serverTimestamp()

未处理的承诺拒绝:this._next 不是函数:@angular/fire/messaging 中的区域

如何修复:“@angular/fire”'没有导出成员 'AngularFireModule'.ts(2305) ionic、firebase、angular

如何将@angular/fire 添加到 Nx 工作区(Angular 项目)?