angular / angular/angularfire

Lazy-load the Firestore with standalone components

Open
#3,584 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
7.8k
Forks
2.2k
Avg merge
22h 28m
Merged PRs (30d)
6

Description

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

Contributor guide

Open the contributing guide

Research direction

Start by reading the standalone component, `get-firestore.ts`, and the `provideFirestore`/`getFirestore` entry points shown in the report. Reproduce the runtime error with the listed Angular, Firebase, and AngularFire versions, then document or implement the supported lazy-loading path and verify that Firestore is not initialized in the app config.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, firebase, typescript
Domain
database, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.