在构建期间设置环境变量

时间:2016-12-13 06:53:37

标签: angular angular-cli

我使用Angular-CLI创建了一个应用程序,并且出于调试目的,希望在应用程序中显示有关正在运行的构建的一些信息。例如,git分支或构建时间等

我可以编写一个操作src/environments/environment.ts的脚本,但我问自己是否有更好的方法。特别是因为该文件是源代码控制的一部分。

在Angular-CLI上切换以覆盖变量的值会很好。我们假设变量environment.buildenvironment.time设置为environment.ts中的dummys。然后使用ng --env[build]=master --env[time]=201612130742我会用计算值覆盖那些。

但据我所知,这样的事情并不存在?

2 个答案:

答案 0 :(得分:0)

您可以使用gulp-ng-config在配置文件/ CD过程中注入配置。另外,请查看this文章,了解有关如何实现此问题的更多选项。

答案 1 :(得分:0)

angular-cli带有开箱即用的环境。如果您已使用ng eject弹出项目,则需要手动配置环境文件

您可以将环境变量传递给webpack构建以获取所需的任何值。我使用env变量传入环境并选择环境配置文件,但您可以设置其他变量,如下所示

我的package.json在脚本构建过程中提供了环境标志

  "scripts": {
    "ng": "ng",
    "start": "webpack-dev-server --env.target=local --port=4200 --history-api-fallback",
"build:prod": "webpack --env.target=prod --env.zip --env.aot --env.extreme --colors",

您可以使用环境标志

// export a function that returns a promise that returns the config object
module.exports = function(env) {
const isAot = env.aot || false;
const isZip = env.zip || false;
const isExtreme = env.extreme || false;
const isAnalyze = env.analyze || false;
const isVirtualbox = env.virtualbox || false;
const isLocal = env.target === 'local';
if(isLocal) { /* set the css file to a variable mycssfile*/ }