如何重用Angular項目的構建

Question

如何重用我的Angular構建，這樣我就不必為每個特定環境構建？

我們需要找到一種在Angular中運行時操作環境的方法！

我們為每個環境設置了設置，我們使用NG build --env = dev並為開發環境構建。 如何更改QA，UAT和生產環境中的配置？

工具集：.Net Visual Studio Team Services，Angular 2

在運行時沒有辦法做到這一點嗎？ 我們是否堅持構建時間/設計時間？

我們還可以考慮根據我們的網址選擇具有后綴的環境嗎？ https：// company-fancyspawebsite- qa .azurewebsites.net

PS：我們正在為每個環境使用Angular 2環境文件夾和應用程序設置文件。

Answer 1

我使用配置服務在運行時提供可編輯的配置設置。 （這是使用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位於我的src文件夾中

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

將config.json添加到.angular-cli.json中的資源

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

如何使用它

export class MyComponent {
    private config: Config;

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

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