Angular 2 和 Team City 生产/环境变量

Question

我们有一个新的 Angular 应用程序正在将 AOT 构建到一个文件夹中。一切正常，但我们正在尝试使用 TeamCity/Octopus Deploy 将其配置为五步构建过程，其中每个步骤将使用一些不同的变量作为端点（API 调用等）。我试图弄清楚将此传递给未在后端运行的 AOT 应用程序的最佳方法。

我知道--environment 标志可用于触发不同的配置，但我们的目标是一个构建通过所有环境。我不知道如何根据应用程序所处的环境在应用程序中传递变量。

我目前的想法是在 assets 文件夹中保留一个 config.js 文件，以便应用程序可以在应用程序的其余部分之前加载它并在窗口上设置一些变量，但这给我留下了一个问题能够将 TS 文件导入到需要这些变量的文件中。

如何以更直观的方式将此信息传递到应用程序中？如果没有单独的构建，这是否不可能解决？

Answer 1

我会以您的 config.js 理念为基础。配置应该作为应用程序启动的一部分加载，而不是构建的一部分。您需要创建一个在应用程序启动时加载 config.js 的服务，使用 APP_INITIALIZER 提供程序并将其传递给创建服务的工厂。这是一个例子：

app.module.ts

import { NgModule, APP_INITIALIZER } from '@angular/core';

@NgModule({
    imports: [
        ....
    ],
    declarations: [
        ....
    ],
    providers: [
        {
            provide: APP_INITIALIZER,
            useFactory: configServiceFactory,
            deps: [ConfigService, Http, AppConfig],
            multi: true
        },
        AppConfig,
        ConfigService
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

配置服务：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

import { AppConfig } from '../../app.config';

@Injectable()
export class ConfigService {
    private _config: AppConfig;

    constructor(private http: Http, private config: AppConfig) {
    }

    public Load(): Promise<AppConfig> {
        return new Promise((resolve) => {
            this.http.get('./config.json').map(res => res.json())
            .subscribe((config: AppConfig) => {
                this.copyConfiguration(config, new AppConfig()).then((data: AppConfig) => {
                    this._config = data;
                    resolve(this._config);
                });
            }, (error: any) => {
                this._config = new AppConfig();
                resolve(this._config);
            });
        });
    }

    public GetApiUrl(endPoint: any): string {
        return `${this._config.ApiUrls.BaseUrl}/${this._config.ApiUrls[ endPoint ]}`;
    }

    public GetApiEndPoint(endPoint: any): string {
        return this._config.ApiUrls[ endPoint ];
    }

    public Get(key: any): any {
        return this._config[ key ];
    }

    private copyConfiguration(source: Object, destination: Object): any {
        return new Promise(function(resolve) {
            Object.keys(source).forEach(function(key) {
                destination[ key ] = source[ key ];
                resolve(destination);
            });
        });
    }
}

export function configServiceFactory(config: ConfigService) {
    return () => config.Load();
}