在 Angular2 应用程序中使用 Docker 环境变量

【问题标题】：Using Docker Environment Variables in Angular2 application在 Angular2 应用程序中使用 Docker 环境变量
【发布时间】：2016-10-20 14:36:25
【问题描述】：

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

用例：

环境.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 运行期间作为环境变量提供

这可能吗？如果没有，请纠正我的理解并提出任何其他替代解决方案

【问题讨论】：

你有没有解决这个问题。我也有同样的问题？
不行，使用angular2的Resolver从配置文件中预取主机信息

标签： angular docker webpack

【解决方案1】：

Angular cli 环境是编译时常量。这当然与您在使用 Docker 时对应用程序的看法有些矛盾。使用 Docker，您希望在不同的环境中运行相同的工件（使用环境变量）。

到目前为止，我想出了两个解决方案，虽然我觉得这两个解决方案都很老套：

使用服务器端渲染

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

<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 调用

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

您可以在onInit() 中的app.component.ts 中执行此操作，或者在您的第一条路线上使用guard。

【讨论】：