Using dynamic configuration settings (K8s environment loader) for initialization of the AngularFireModule

[Marian (IBM) Zoll]

Hi all, 

Getting first experiences with angularfire (https://github.com/angular/angularfire) currently I am trying to resolve the configuration properties for the initialization dynamically to use the same build version of our app in all of our environments (dev, nonprod, ...).

For that I am using an environment preloader...

import { environment } from './environments/environment'; 

import { environmentLoader } from './environments/environment-loader'; 

... /** * Loads the environment available in the assets folder. This enables dynamic configuration for Docker images. */ 

export const environmentLoader = new Promise<any>((resolve, reject) => { const xmlhttp = new XMLHttpRequest(); const url = './assets/environments/environment.json'; xmlhttp.open('GET', url, true); xmlhttp.onload = () => { if (xmlhttp.status === 200) { resolve(JSON.parse(xmlhttp.responseText)); } else { console.warn('Default env is used!'); resolve(defaultEnvironment); } }; xmlhttp.send(); });

... within my main.ts ...

... environmentLoader.then((env) => {

 /** * Replaces the environment values with the assets environment.json data. */ 

Object.assign(environment, env); 

 ... platformBrowserDynamic() .bootstrapModule(AppModule) .catch((err) => console.error(err)); });

As you can see the preloader does switch the content of the local environment.ts used for development with the specific variations of the other environments. Using this technique the correspondent settings for each environment can be used within the application without the need of rebuilds.

All of this works out quite fine with the exception of the initialization of the AngularFireModule within app.module.ts. For that it seems to be mandatory to initialize the module within the imports section of the root module as follows...

... import { environment } from 'src/environments/environment'; ... AngularFireModule.initializeApp(environment.firebase); ...

Nevertheless the bootstrapping is chained after the execution of the preloader this initialization seems to be performed asynchronously. As a result the AngularFireModule does always get initialized with the local environment properties and does not consider the environment change (working with the APP_INITIALIZER token to delay the bootstrapping and wait for the environment preload - like I would do in similar cases working with some provider - does not seem to be a option either).

Questions:

• Is there a way to postpone the bootstrap of the app module in another way?
• Is there a way to postpone the call to the initializeApp method of the AngularFireModule or to initialize the module totally different?
• Is there a way to load a json file synchroniously before the angular bootstrap will be executed?

Thanks for any advice, kind regards