Angular AppConfig loaded from server, but needed in module setup

Question

A lot of examples on the web around getting the configuration at APP_INITIALIZER in angular (now 8), here is one that sums it up: https://davembush.github.io/where-to-store-angular-configurations/

NgModule looks finally like this

@NgModule({
 // ...
  imports: [
    BrowserModule,
    HttpClientModule,
    // My modules here
    AngularFireModule.initializeApp(firebaseConfigHere)
  ],
  providers: [{
      provide: APP_INITIALIZER,
      useFactory: load,
      deps: [
        HttpClient,
        ConfigService
      ],
      multi: true
    }
  ],
 // ...
})

I am stuck because I have modules that are initliazed with configuration, one of which is the infamous AngularFireModule like this

AngularFireModule.initializeApp(firebaseConfigHere)

I tried so many tricks, cannot seem to get the hang of it, how do we pass configrations that are loaded from sever, to modules set up in the imports?

Note the imports fire before the APP_INITIALIZER

Answer 1

1: provide fire module without calling initializeApp; 2: provide factory for FirebaseOptionsToken token with ConfigService dependency 3: provide anything you would pass to initializeApp as a second param for FirebaseNameOrConfigToken

@NgModule({
  imports: [BrowserModule,HttpClientModule,AngularFireModule],
  providers: [
   {/* your APP_INITIALIZER here */}
   { provide: FirebaseNameOrConfigToken, useValue: null},
   { 
    provide: FirebaseOptionsToken,
    useFactory: (configService: ConfigService) => configService.pathToFirebaseConfig},
    deps: [ConfigService]
  ]
})

this will make factory to be called lazily. Note, that you cannot inject anything related to firebase module to ConfigService or other initializer dependencies, because factory I proposed will be called earlier than config arrives.