AngularFire – 解决 NullInjectorError 的方法

在操作AngularFire时,我遇到了一点困难,所以我把它记录下来作为备忘。

事件

使用 AngularFire 中的 AngularFireDatabase 模块尝试连接到实时数据库时,出现了以下错误。
由于没有提供 InjectionToken,所以需要将 AngularFireDatabase 设置为提供者,但是这样做似乎不太顺利。。

ERROR NullInjectorError: R3InjectorError(AppModule)[AngularFireDatabase -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: 
  NullInjectorError: No provider for InjectionToken angularfire2.app.options!

环境

使用ng版本的输出结果。
似乎与@angular/fire的7系相关。

@angular-devkit/architect       0.1302.6
@angular-devkit/build-angular   13.2.6
@angular-devkit/core            13.2.6
@angular-devkit/schematics      13.2.6
@angular/cli                    13.2.6
@angular/fire                   7.3.0
@schematics/angular             13.2.6
rxjs                            7.5.5

处理方法

提供者未设置导致错误,但需要对其格式进行一些改进才行。

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";

import { AppComponent } from "./app.component";
import { CommentDatePipe } from "./pipes/comment-date.pipe";
import { initializeApp, provideFirebaseApp } from "@angular/fire/app";
import { environment } from "../environments/environment";
import { provideAuth, getAuth } from "@angular/fire/auth";
import { provideDatabase, getDatabase } from "@angular/fire/database";
import { FIREBASE_OPTIONS } from "@angular/fire/compat";

@NgModule({
  declarations: [AppComponent, CommentDatePipe],
  imports: [
    BrowserModule,
    FormsModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => getAuth()),
    provideDatabase(() => getDatabase()),
  ],
  providers: [{ provide: FIREBASE_OPTIONS, useValue: environment.firebase }],
  bootstrap: [AppComponent],
})
export class AppModule {}

广告
将在 10 秒后关闭
bannerAds