angular / angular/angularfire

Lazy-load the Firestore with standalone components

Ouverte
#3,584 3 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
Langage dominant
TypeScript
Étoiles
7.8k
Forks
2.2k
Merge moyen
22 h 28 min
PR mergées (30 j)
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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par lire le composant autonome `get-firestore.ts` et les points d’entrée `provideFirestore`/`getFirestore` présentés dans le rapport. Reproduisez l’erreur d’exécution avec les versions d’Angular, de Firebase et d’AngularFire indiquées, puis documentez ou implémentez le chemin de chargement différé pris en charge et vérifiez que Firestore n’est pas initialisé dans la configuration de l’application.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, firebase, typescript
Domaine
database, frontend
Type d'issue
Fonctionnalité
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
À clarifier
Accessibilité débutants
30/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.