在客户端 Angular 应用程序中访问动态生成的服务器端环境变量答案

【问题标题】：Accessing dynamically generated server side environment variables in client side Angular app在客户端 Angular 应用程序中访问动态生成的服务器端环境变量
【发布时间】：2017-09-18 20:13:47
【问题描述】：

我正在使用 Heroku 管道工作流程，它使用动态生成的 URL 部署评论应用程序。例如，假设我的生产应用程序部署在 mykickassapp.herokuapp.com，每次我在 repo 中创建 PR，Heroku 都会自动将该 PR 部署在 mykickassapp-pr-50.herokuapp.com 之类的地方。

在我的客户端代码中，我使用环境文件并将我的应用程序 URL 存储在其中，在上面的示例中：mykickassapp.herokuapp.com。问题是它显然不适用于部署在不同动态生成的 URL 上的评论应用程序。幸运的是，Heroku 将应用程序的 URL 存储在环境变量中。但问题是如何将其放入 Angular 应用的客户端？

我的应用使用标准的 Angular-CLI 生产构建过程。

【问题讨论】：

标签： angular build environment-variables

【解决方案1】：

我很想知道是否有人有更好或更简单的方法来做到这一点，但这是我想出的解决方案。

我创建了一个小的 js 脚本，我将它保存在项目根目录的 config.js 文件中。然后我在 npm postinstall 脚本中添加了该脚本以在 ng build 之前运行。

/src/environments/environment.prod.ts

export const environment = {
  production: true,
  URL: 'https://mykickassapp.herokuapp.com/'
};

config.js

const fs = require("fs");
const appName = process.env.HEROKU_APP_NAME;
if (appName) {
    const data = fs.readFileSync('./src/environments/environment.prod.ts', 'utf-8');
    const appURL = `URL: 'https://${appName}.herokuapp.com',`;
    const newValue = data.replace(/URL:(.*)/g, appURL);
    console.log(newValue);
    fs.writeFileSync('./src/environments/environment.prod.ts', newValue, 'utf-8');
}

package.json

...
"scripts": {    
    ...
    "test": "cross-env DEBUG=true jasmine",
    "postinstall": "node config.js && ng build --aot --prod"
  },
...

【讨论】：