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

Question

我正在使用Heroku管道工作流，该工作流使用动态生成的URL部署审阅应用程序。例如，假设我的生产应用程序已部署在mykickassapp.herokuapp.com上，每次我在存储库中进行PR时，Heroku都会自动将其PR部署在mykickassapp-pr-50.herokuapp.com之类的位置。

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

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

Answer 1

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

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

/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"
  },
...