Angular 2 build once, deploy anywhere

I think a common point of all app to load config dynamicaly is to use the angular provider called APP_INITIALIZER.

This provider allows to execute some code before bootstrapping angular app. Typically the code to execute is something like get some config from an endpoint, eg /configuration. Example here

You can write the code yourself or you can use this lib (under the hood this uses the APP_INITIALIZER): https://github.com/ngx-config/core, more precisely the ConfigHttpLoader

In the example below, we use the lib to load /configuration through an http call. This goes in your app.module.ts

export function configFactory(http: Http): ConfigLoader {
  return new ConfigHttpLoader(http, '/configuration'); // FILE PATH || API ENDPOINT
}    

@NgModule({
imports: [
ConfigModule.forRoot({
          provide: ConfigLoader,
          useFactory: (configFactory),
          deps: [Http]
        })
]
})

Then, the way you provide /configuration depends on how you serve your app. What I did in a project was :

• frontend app is packaged with all configurations (dev.json, integ.json, prod.json)
• pass to docker an environment variable (dev or integ or prod)
• in the Dockerfile of the docker image, make a symlink to the correct config file, depending on the environment, then start the server (in my case it was nginx) :

CMD ln -nfs /path/to/config/${ENVIRONMENT}.json /path/to/configuration && nginx -g "daemon off;"

This way your frontend app always load /configuration, but depending on the environment, the symlink will point to a different config file.

You could use something like this.