角色2和团队城市生产/环境变量 [英] Angular 2 and Team City Production/Environment Variables

问题描述

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

我知道可以用来触发不同配置的 - 环境标志，但是我们的目标是让一个构建遍历所有的环境。我基于如何根据环境中的环境传递变量，我感到失落。

我目前的想法是留下一个配置。 资源文件夹中的js 文件，因此应用程序可以在应用程序的其余部分之前加载它，并在窗口中设置一些变量，但是会留下存在无法将TS文件导入需要这些变量的文件的问题。

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

解决方案

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

app.module.ts

  import来自'@ angular / core'的{NgModule，APP_INITIALIZER}; 
 
 @NgModule（{
 imports：[
 .... 
]，
声明：[
 .... 
 $，
 provider：[
 {
提供：APP_INITIALIZER，
 useFactory：configServiceFactory，
 deps：[ConfigService，Http，AppConfig]，
 multi：true 
}，
 AppConfig，
 ConfigService 
]，
 bootstrap：[AppComponent] 
}）
导出类AppModule {
} 
  

配置服务：

<$来自'@ angular / core'的p $ p> import {Injectable};
import {Http} from'@ angular / http';

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

@Injectable（）
导出类ConfigService {
private _config：AppConfig;

构造函数（私有http：Http，私有配置：AppConfig）{
}

public Load（）：Promise&AppManager {
return new Promise（（resolve）=> {
this.http.get（'./ config.json'）。map（res => res.json（））
.subscribe（（config：AppConfig）=> {
this.copyConfiguration（config，new AppConfig（））然后（（data：AppConfig）=> {
this._config =
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 .forEach（function（key）{
destination [key] = source [key];
resolve（destination）;
}）;
}）;
}
}

导出功能configServiceFactory（config：ConfigService）{
return（）=> config.Load（）;
}


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.

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.

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?

解决方案

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

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 {
}

Config Service:

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();
}

这篇关于角色2和团队城市生产/环境变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！