Lazy-load the Firestore with standalone components

[ghidoz]

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

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[jamesdaniels]

Good news! AngularFire v19 (currently in release candidate) now natively supports code-splitting via @defer. See our new sample app to see it in action. I'll leave this open until we release final and get around to documenting this.

[ghidoz]

That's great news! Looking forward to using it!