Angular 2 和团队城市 Production/Environment 变量

Question

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

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

我目前的想法是在 assets 文件夹中保留一个 config.js 文件，以便应用程序可以在应用程序的其余部分之前加载它，并在 window 上设置一些变量，但这给我留下了无法将 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();
}

Angular 2 和团队城市 Production/Environment 变量

Angular 2 and Team City Production/Environment Variables

environment

teamcity

environment-variables

octopus-deploy

angular