How to reuse the build for an Angular project

Question

How can I reuse my Angular builds so I do not have to build for every specific environment?

we need to find a way to manipulate the environments in runtime in Angular!

We have settings for each environment and we use NG build --env=dev and build for the dev environment. How can I change the configuration in QA, UAT and production environments?

Toolset: .Net Visual Studio Team Services, Angular 2

Is there no way to do this at runtime? Are we stuck with the build time/design time?

Also can we consider selecting environments based on our urls which has a postfix ? https://company-fancyspawebsite-qa.azurewebsites.net

PS:We are using the Angular 2 environments folder and app settings files for each environment.

Answer 1

I use a config service to supply editable config settings at run-time. (this is using angular-cli)

config.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';

export interface Config {
    PageSize: number;
    EnableConsoleLogging: boolean;
    WebApiBaseUrl: string;
}

@Injectable()
export class ConfigService {
    private config: Config;

    constructor(private http: Http) { }

    public getConfigSettings(): Config {
        if (!this.config) {
            var Httpreq = new XMLHttpRequest();
            Httpreq.open("GET", 'config.json', false);
            Httpreq.send(null);

            this.config = JSON.parse(Httpreq.responseText);

            if (this.config.EnableConsoleLogging)
                console.log("Config loaded", this.config);
        }

        return this.config;
    }
}

config.json located in my src folder

{
  "WebApiBaseUrl": "http://myWebApi.com",
  "EnableConsoleLogging": true,
  "PageSize": 10
}

add config.json to your assets in .angular-cli.json

{
  },
  "apps": [
    {
      "assets": [
        "config.json"
      ]
    }
  }
}

how to use it

export class MyComponent {
    private config: Config;

    constructor(private configService: ConfigService) {
        this.config = configService.getConfigSettings();

        console.log(this.config.WebApiBaseUrl);
    }
}