angular / angular/angularfire

Lazy-load the Firestore with standalone components

オープン
#3,584 コメント 3 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
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

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。