Lazy-load the Firestore with standalone components
- 主要言語
- TypeScript
- スター
- 7.8k
- フォーク
- 2.2k
- 平均マージ
- 22時間 28分
- マージ済み PR(30日)
- 6
説明
Hi, is there a way to lazy-load the Firestore?
I'm using it only in a lazy-loaded component, so I would like to avoid providing it in the app config with
`provideFirestore(() => getFirestore())`
I followed this example: https://github.com/angular/angularfire/blob/main/samples/advanced/src/app/firestore/firestore.component.ts
I have a `get-firestore.ts` with this content:
```
import { getFirestore } from '@angular/fire/firestore';
export const firestore = getFirestore();
```
and I try to lazy-load it like this:
```
constructor() {
this.initFirestore();
}
private async initFirestore() {
const { firestore } = await import('./get-firestore');
this.firestore = firestore;
}
```
But I get this error at run-time:
```
Error: Either AngularFireModule has not been provided in your AppModule (this can be done manually or implictly using
provideFirebaseApp) or you're calling an AngularFire method outside of an NgModule (which is not supported).
```
Even if I add the `AngularFireModule` to the component's imports, it doesn't change.
So, what's the right way to lazy-load the FIrestore, with standalone components?
### Version info
**Angular:** 19.0.0
**Firebase:** 10.12.0
**AngularFire:** 18.0.1
コントリビューションガイド
調査の方向性
まず、スタンドアロンコンポーネント `get-firestore.ts` と、レポートに示されている `provideFirestore`/`getFirestore` のエントリポイントを読みます。記載されている Angular、Firebase、AngularFire のバージョンでランタイムエラーを再現し、その後、サポートされている遅延ロードのパスを文書化または実装し、アプリ設定で Firestore が初期化されていないことを確認します。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, firebase, typescript
- 領域
- database, frontend
- issue の種類
- 機能追加
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- 説明が足りない
- 初心者へのやさしさ
- 30/100