angular - 如何为 Angular 项目重用构建

Question

如何重用我的 Angular 构建，这样我就不必为每个特定环境构建？

我们需要找到一种方法来在 Angular 的运行时中操纵环境!

我们对每个环境都有设置，我们使用 NG build --env=dev 并为开发环境构建。如何更改 QA、UAT 和生产环境中的配置？

工具集:.Net Visual Studio Team Services、Angular 2

有没有办法在运行时做到这一点？我们是否受制于构建时间/设计时间？

我们还可以考虑根据我们的 url 来选择环境吗？ https://company-fancyspawebsite- qa.azurewebsites.net

PS:我们正在为每个环境使用 Angular 2 环境文件夹和应用程序设置文件。

Answer 1

我使用配置服务在运行时提供可编辑的配置设置。(这是使用 angular-cli)

配置.服务.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 中的 Assets

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

如何使用它

export class MyComponent {
    private config: Config;

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

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