AngularFire で Realtime Database を使おうとすると NullInjectorError

ng add @angular/fire して表示されたメニューで Realtime Database を使う設定にすると、app.module.ts に imports を追加してくれる。ただ、設定が足りないようで、コンポーネントのコンストラクタで AngularFireDatabase をインジェクトしようとすると、NullInjectorError が出る。

で、下記の2行を追加すると使えるようになった。

// 省略
import { FIREBASE_OPTIONS } from "@angular/fire/compat";

@NgModule({
  declarations: [
    // 省略
  ],
  imports: [
    // 省略
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideDatabase(() => getDatabase())
  ],
  providers: [{ provide: FIREBASE_OPTIONS, useValue: environment.firebase }],
  bootstrap: [AppComponent]
})
export class AppModule { }

コメントを残す