Lazy-load the Firestore with standalone components

Offen

#3,584 erstellt am 27.11.2024 3 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit: 4/5
Geschätzter Aufwand: 3-5 Tage
Anfängerfreundlichkeit: 30/100

Issue-Typ: Feature
Klarheit: Muss geklärt werden
Aktivitätsstatus: Veraltet
Tech-Stack: angular, firebase, typescript
Bereich: database, frontend

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.

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

Vorherrschende Sprache: TypeScript
Sterne: 7.8k
Forks: 2.2k
Ø Merge: 3 T. 6 Std.
Gemergte PRs (30 T.): 5

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
Forken Sie das Repository und arbeiten Sie in einem Branch.
Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus angular/angularfire

Canary builds are named after the release candidate, so npm ranks them above it Offen

comp: build/pipeline type: bug version: current (v17+)

Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 74/100

angular/angularfire#3766 · Erstellt am 23.9.2026
`ng add @angular/fire` stops with `Cannot read properties of undefined (reading 'email')` on firebase-tools 15 Offen

comp: schematics type: bug version: current (v17+)

Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 76/100

angular/angularfire#3768 · Erstellt am 23.9.2026
docs: the documented install and upgrade commands do not work with 21.0.0-rc.1 Offen

comp: docs type: chore version: current (v17+)

Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 58/100

angular/angularfire#3764 · Erstellt am 22.9.2026
Use `TransferState` to hand server-rendered Firestore data to the browser, instead of reading every document twice Offen

comp: firestore comp: ssr priority: P0 (critical) type: feature version: current (v17+)

angular/angularfire#3757 · 1 zugewiesene Person · Erstellt am 31.8.2026
Six `firebase` entry points have no `@angular/fire` equivalent, so their exports are unreachable Offen

comp: core type: feature

angular/angularfire#3755 · 1 zugewiesene Person · Erstellt am 31.8.2026

Alle Issues in angular/angularfire