angular / angular/angularfire

Lazy-load the Firestore with standalone components

Offen
#3,584 3 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
7.8k
Forks
2.2k
Ø Merge
22 Std. 28 Min.
Gemergte PRs (30 T.)
6

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne damit, die eigenständige Komponente `get-firestore.ts` sowie die im Bericht gezeigten Einstiegspunkte `provideFirestore`/`getFirestore` zu lesen. Reproduziere den Laufzeitfehler mit den aufgeführten Versionen von Angular, Firebase und AngularFire. Dokumentiere anschließend den unterstützten Pfad für Lazy Loading oder implementiere ihn und überprüfe, dass Firestore in der App-Konfiguration nicht initialisiert wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, firebase, typescript
Bereich
database, frontend
Issue-Typ
Feature
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
30/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.