Lazy-load the Firestore with standalone components
- 主要语言
- 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