angular / angular/angularfire

Lazy-load the Firestore with standalone components

未關閉
#3,584 3 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視
主要語言
TypeScript
星號
7.8k
分支
2.2k
平均合併
22 小時 28 分鐘
30 天內合併 PR
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 摘要。