在Angular2应用程序中使用Docker Environment变量

时间:2016-10-20 14:36:25

标签: angular docker webpack

我想在Angular-Cli(1.0.0-beta.16)的'environment.prod.ts'中使用预定义的Docker Environment变量。

用例:

environment.prod.ts:

export const environment = {
production: true,
host1: $ENV1, //specific service endpoint goes here
host2: $ENV2 //specific service endpoint goes here
};

我的基于Angular CLI的应用程序依赖于environment.prod.ts来获取与后端服务相关的主机信息(host1,host2)&应用程序经历各种环境,如DEV,TEST,QA,PROD ......

$ ENV1,$ ENV2在Docker运行期间作为环境变量提供

这可能吗?如果没有,请纠正我的理解&建议任何其他替代解决方案

1 个答案:

答案 0 :(得分:0)

Angular cli环境是编译时常量。当然,这与您在使用Docker时对应用程序的思考有点矛盾。使用Docker,您希望在不同的环境中运行相同的工件(使用环境变量)。

到现在为止,我想出了两个解决方案,虽然两个人都觉得我很讨厌:

使用服务器端呈现

...并将变量注入全局范围。您可以在打开<script>标记后添加另一个<html>标记以及所需的变量:

<script>
var environment = { 
  host1: 'some injected value', 
  host2: 'depending on the view engine you are using' 
};
</script>

然后有一个界面

export interface Environment {
  host1: string;
  host2: string;
}

interface Window {
  environment: Environment;
}

使用API​​调用

...在应用程序启动时/之后获取变量

您可以在app.component.ts的{​​{1}}中执行此操作,或在您的第一条路线上使用guard