Angular 9 IVY Lazy Load Component with AngularFireMessagingModule R3InjectorError(AppBrowserModule)[InjectionToken angularfire2.app.options

Question

I have an Angular app which uses AngularFireMessagingModule for push notifications.

With my current configuration I have this added in my AppBrowser module's imports array:

AngularFireModule.initializeApp({
  apiKey: "myAPIKey",
  projectId: "myProjectId",
  messagingSenderId: "myMessagingSenderId
  appId: "mhyAppId"
}),
AngularFireMessagingModule

As a result the firebase module is added in the main bundle.

Since with Angular 9 IVY, we can lazyload components, I want to lazyload my notifications component which actually uses AngularFireMessagingModule.

I am following this post https://medium.com/angular-in-depth/lazy-load-components-in-angular-596357ab05d8 to achieve this.

I have removed above modules imports from my AppBrowserModule and have created a new file with below code:

import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { ChangeDetectorRef, Component, NgModule, ViewContainerRef } from '@angular/core';
import { AngularFireModule } from '@angular/fire';
import { AngularFireMessaging, AngularFireMessagingModule } from '@angular/fire/messaging';
import { MatButtonModule } from '@angular/material/button';
import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { StorageMap } from '@ngx-pwa/local-storage';
import { AuthService } from '../shared/services/auth.service';
import { GlobalService } from '../shared/services/global.service';
import { MediaService } from '../shared/services/media.service';

@Component({
  selector: 'enable-notifcations',
  templateUrl: './enable-notifications.component.html'
})
export class EnableNotificationsComponent {

  constructor(public viewContainerRef: ViewContainerRef,
    public dialog: MatDialog,
    private authService: AuthService,
    public _gs: GlobalService,
    public media: MediaService,
    private cdr: ChangeDetectorRef,

    private http: HttpClient,
    private messaging: AngularFireMessaging,
    private storage: StorageMap
  ) {
  }

  ngOnDestroy() {

  }
}

@NgModule({
  imports: [
    CommonModule,
    MatButtonModule,
    MatDialogModule,
    AngularFireModule.initializeApp({
      apiKey: "myAPIKey",
      projectId: "myProjectId",
      messagingSenderId: "myMessagingSenderId
      appId: "mhyAppId"
    }),
    AngularFireMessagingModule
    AngularFireMessagingModule
  ],
  declarations: [
    EnableNotificationsComponent
  ]
})
class EnableNotificationsModule { }

And in my app component I am conditionally lazyloading this component.

const { EnableNotificationsComponent } = await import(/* webpackPrefetch: true */'./account/enable-notifications.component');
const enableNotificationsComponentFactory = this.cfr.resolveComponentFactory(EnableNotificationsComponent);
this.enableNotificationsComponentInstance = this.enableNotificationsContainer.createComponent(enableNotificationsComponentFactory, null, this.injector);
this.enableNotificationsComponentInstance.instance.initNotifications();

This approach is working for my other lazyloaded components but in this case its throwing below error:

Unhandled Promise rejection: R3InjectorError(AppBrowserModule)[InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: 
  NullInjectorError: No provider for InjectionToken angularfire2.app.options! ; Zone: <root> ; Task: Promise.then ; Value: NullInjectorError: R3InjectorError(AppBrowserModule)[InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: 
  NullInjectorError: No provider for InjectionToken angularfire2.app.options!

Can anyone please guide how to fix this?