title: Angularfire load firebase config asynchronoulsy
body: <p>I want to load the firebaseConfig asynchronously because I want to seperate config from artifact, to be able to have a clean CI/CD pipeline (build once, run on any environment, get config from server).</p>
  <p>But to use firebase I need to call provideFirebaseApp(() =&gt; initializeApp(firebaseConfig)) inside of the imports of my AppModule. How can I do this if firebaseConfig must be loaded asynchronously?</p>
  <p>What I would like to do:</p>
  <pre class="lang-js prettyprint-override"><code>let config: { firebase: any };
  
  function initializeAppFactory(httpClient: HttpClient): () =&gt; Observable&lt;any&gt; {
    return () =&gt; httpClient.get('https://myserver.com/api/config').pipe(c =&gt; config = c)
  }
  
  @NgModule({
    imports: [
      BrowserModule,
      HttpClientModule,
      provideFirebaseApp(() =&gt; {
        return initializeApp(config.firebase); 
        // THIS DOES NOT WORK, because the APP_INITIALIZER is async! How can we also make this import async?!?
      })],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [{
      provide: APP_INITIALIZER,
      useFactory: initializeAppFactory,
      deps: [HttpClient],
      multi: true,
    }],
  })
  
  </code></pre>