Angular 2 和 Team City 生产/环境变量 [英] Angular 2 and Team City Production/Environment Variables

问题描述

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

We have a new Angular app that is building AOT to a folder. Everything is working fine, but we are trying to configure it to a five-step build process using TeamCity/Octopus Deploy, where each step will use some different variables for endpoints (API calls, etc.) I'm trying to figure out the best way to pass this to an AOT app that is not running off a backend.

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

I know about the --environment flag that can be used to fire off different configs, but our goal is to have one single build go through all the environments. I am at a loss for how to pass variables in the application based on the environment it's in.

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

My current idea is to leave a config.js file in the assets folder so the app can load it before the rest of the app and set some variables on the window, but that leaves me with the problem of not being able to import a TS file into the files that need those variables.

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

How can I pass this info into the app in a more intuitive way? Is this impossible to get around without separate builds?

推荐答案

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

I would build on the config.js idea you have. The config should be loaded as part of the application startup, not part of the build. You need to make a service that loads the config.js on startup of your application, use the APP_INITIALIZER provider and pass it the factory that creates the service. Here is an example:

app.module.ts

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 和 Team City 生产/环境变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！