如何将相同的 angular build (dist) 部署到具有不同后端 url 的多个环境？

Question

最近，当我们想要使用 jenkins 将相同的 angular 构建（dist）部署到多个环境时，我们遇到了这种情况，这意味着不同的后端 url。

使用 'ng build --configuration $ENV' (angular-6) with backend url mentioned in 'src/environment/environment.$ENV.ts' 显然不是我们的解决方案，因为这意味着创建多个特定于环境的构建。

Answer 1

我们是这样解决的：（参考：https://github.com/angular/angular-cli/issues/4318，特别感谢：Michael Arnauts）

指向你环境中的这个全局js变量。$ENV.ts文件：

src/environments/environment.$ENV.ts

export const environment = {
    production: true,
    backendUrl: (<any>window)._env.backendUrl,
};

在你的index.html
中添加js的引用
... <head> ... <script src="/assets/env.js"></script> </head> ...
创建你的环境值 js 文件：

src/environments/environment.$ENV.values.js
```
window._env = {
    backendUrl: 'https://dev.example.com:XXXX/',
};
```
创建构建（dist）
最后，在部署时做：

cp src/environments/environment.$ENV.values.js dist/assets/env.js
完成！

请注意，第 1 步是必需的，因此您不需要在本地执行第 6 步。

Answer 2

Step - 1 : Create a js file

只需在assets目录下添加一个js文件即可

假设名称是 config.js 并将所有配置放入其中例如：

var myAppGlobalConfig = { param1: 'value1' };
var BASE_URL = "http://xxx.backend.xxx/api/";
var GET_DATA = BASE_URL + "data.go";

Step - 2 : Include in index.html

现在在 index.html 中只需在任何其他脚本之前包含该脚本

<script src="assets/config.js"></script>

Step - 3: Use them inside your typescript classes

例如，您可以分配 http 端点地址。

this.http.get(window["DATA_URL"]).subscribe(...)

此外，在不同的环境中只需更改config.js

中声明的全局变量即可

How to deploy same angular build (dist) to multiple environments with different backend url?