Firebase Realtime Database を Angular プロジェクトに実装しようとしているのですが、最初のステップの 1 つで行き詰まってしまいます。AngularFireModule と AngularFireDatabaseModule をインポートしています。次のエラーが発生します。
Module '"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305)
Module '"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.
インポート方法は次のとおりです。
import {AngularFireModule } from '@angular/fire';
import {AngularFireDatabaseModule} from '@angular/fire/database'
何か見落としているのでしょうか？コマンドで@angular/fireをインストールしました
npm i firebase @angular/fire
また、Firebase ツールもインストールしました。現在インストールされている Angular パッケージとそのバージョンのリストは次のとおりです。
Angular CLI: 12.2.2
Node: 14.17.4
Package Manager: npm 6.14.14
OS: win32 x64
Angular: 12.2.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1202.2
@angular-devkit/build-angular 12.2.2
@angular-devkit/core 12.2.2
@angular-devkit/schematics 12.2.2
@angular/cli 12.2.2
@angular/fire 7.0.0
@schematics/angular 12.2.2
rxjs 6.6.7
typescript 4.3.5
情報過多で申し訳ありませんが、問題が何なのかまったくわかりません。どなたか助けていただければ幸いです。今のところ、互換性の問題か、最新バージョンにはもう存在しない機能ではないかと考えていますが、よくわかりません。
ベストアンサー1
AngularFire 7.0.0 は昨日リリースされ、バンドル サイズ削減のメリットが多数ある新しい API が搭載されました。
のようなトップレベルクラスの代わりにAngularFireDatabase、より小さな独立した関数をインポートできるようになりました。
import { list } from '@angular/fire/database';
構成を指定するためのより柔軟な API があるため、初期化プロセスも少し異なります。
@NgModule({
imports: [
provideFirebaseApp(() => initializeApp(config)),
provideFirestore(() => {
const firestore = getFirestore();
connectEmulator(firestore, 'localhost', 8080);
enableIndexedDbPersistence(firestore);
return firestore;
}),
provideStorage(() => getStorage()),
],
})
古いAPIを使い続ける場合は、互換性レイヤー。
import { AngularFireModule} from '@angular/fire/compat'
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';