Most modern way to externalize Angular 2 environment configuration?

Question

I\'m curious what the most modern way, as of April 2017, to build an Angular 2 app for deployment with external configuration?

Following the Build Once Deploy Anyw

Answer 1

If you really must build once and deploy the same build artifact multiple times then one solution (although in my opinion is a bit of a hack) is to put your external configuration inside 'assets' folder then make an ajax call from environment.ts to read the values:

src/environments/environment.ts:

export const environment = new Promise((resolve, reject) => {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', './assets/environment.json');
  xhr.onload = function () {
    if (xhr.status === 200) {
      resolve(JSON.parse(xhr.responseText));
    }
    else {
      reject("Cannot load configuration...");
    }
  };
  xhr.send();
});

src/assets/environment.json:

{
  "production": false,
  "some_api_url": "https://dev_url"
}

You also need to postpone module bootstrapping to when ajax call is completed:

src/main.ts:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment as environmentPromise } from './environments/environment';

environmentPromise.then(environment => {

  if (environment["production"]) {
    enableProdMode();
  }

  platformBrowserDynamic().bootstrapModule(AppModule);
});

Working sample here: https://github.com/mehradoo/angular-external-cfg/commit/0dd6122a0d8ff100c23458807cc379e9e24cc439