Ionic v4: Import Angularfire in lazy loaded module

Hi all,

I’ve got the following question:

Technical Setup: Landing Page (does not need firebase) + Lazy Loaded Page (does need firebase)

I have a project with two pages. Let’s call them LandingPage and FirebasePage.

My app thus consists of the AppModule, the AppRoutingModule and the two lazy loaded modules LandingPageModule and FirebasePageModule.

The routings do look as follows:

{ path: '', loadChildren: () => import('./landing-page.module').then(m => m.LandingPageModule)},
{ path: 'firebase', loadChildren: () => import('./firebase.module').then(m => m.FirebasePageModule)}.

Preloading: The preloadingStrategy is NoPreloading.

How it works at the moment

At the moment I import Angularfire in my AppModule, so Angularfire gehts downloaded even if people just navigate to the LandingPage, where no firebase functionalities are required.

My imports are:

imports: [<other modules>
AngularFireModule.initializeApp(environment.firebaseConfig, 'my-app-name'),

So when anybody routes to the FirebasePage, Angularfire is ready to be used.

However, Angularfire ist also available in the LandingPage and ads almost 500kb to the main package size, even if people just navigate to the LandingPage, where no firebase functionalities are required.

Objective: Import Angularfire only in the lazy loaded module

To reduce the bundle size that people need to download when visiting only the landing page, I would like to move the Angularfire imports to the lazy loaded FirebasePageModule. However, when just moving the three imports from the AppModule to the FirebasePageModule, I get the following error when routing to the LandingPage as well as when routing to the FirebasePage:

NullInjectorError: StaticInjectorError(AppModule)[AngularFirestore]

Does anybody know, how to import Angularfire directly in the lazy loaded module, where I need it, instead of importing it in the AppModule where it becomes available to all lazy loaded modules (but increases bundle size even when visiting pages that do not need Angularfire)?

Thanks a lot, your help is highly appreciated! :slight_smile:

Have you found any solution?

Nope, no solution yet :slightly_frowning_face:

Sorry for being late to this question.

You can lazy load AngularFire. Make sure to add a provider for all services injecting AngularFirestore, AngularFireAuth etc in the FirebaseModule. Also make sure, the provider for those services are not added in the AppModule.


Hope it helps.