Angular 在客户端应用程序中访问动态生成的服务器端环境变量
我使用的是Heroku pipeline工作流,它使用动态生成的URL部署审查应用程序。例如,假设我的生产应用程序部署在mykickassapp.herokuapp.com,每次我在回购协议中进行PR时,Heroku都会自动将该PR部署在类似mykickassapp-PR-50.herokuapp.com的位置 在我的客户端代码中,我使用环境文件并将我的应用程序URL存储在其中,在上面的示例中:mykickassapp.herokuapp.com。问题是,它显然不适用于部署在不同动态生成URL的review应用程序。谢天谢地,Heroku将应用程序的URL存储在一个环境变量中。但问题是如何让它进入Angular应用程序的客户端Angular 在客户端应用程序中访问动态生成的服务器端环境变量,angular,build,environment-variables,Angular,Build,Environment Variables,我使用的是Heroku pipeline工作流,它使用动态生成的URL部署审查应用程序。例如,假设我的生产应用程序部署在mykickassapp.herokuapp.com,每次我在回购协议中进行PR时,Heroku都会自动将该PR部署在类似mykickassapp-PR-50.herokuapp.com的位置 在我的客户端代码中,我使用环境文件并将我的应用程序URL存储在其中,在上面的示例中:mykickassapp.herokuapp.com。问题是,它显然不适用于部署在不同动态生成URL的
我的应用程序使用标准Angular CLI生产构建过程。我很想知道是否有人有更好或更简单的方法来实现这一点,但下面是我提出的解决方案 我创建了一个小js脚本,保存在项目根目录的config.js文件中。然后,我将该脚本添加到npm postinstall脚本中,以便在ng构建之前运行 /src/environments/environment.prod.ts
export const environment = {
production: true,
URL: 'https://mykickassapp.herokuapp.com/'
};
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');
}
config.js
export const environment = {
production: true,
URL: 'https://mykickassapp.herokuapp.com/'
};
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"
},
...