Angular 5 - Dev/QA 使用带有 uglify 和 minify 的 ng build 构建（如 ng build --prod）

Question

我正在使用 angular5 和 angular-cli，并且需要 uglify/minify 代码，可以在浏览器的检查器工具中查看。我的 angular-cli.json 有：

"environmentSource": "environments/environment.ts",
"environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
}

对于生产来说运行可以通过 ng build --prod 但这只能用于生产环境。我想为开发环境做同样的事情，但我无法实现它。除了 --enviornment:

之外，我已经尝试了大多数具有 prod 值的构建选项

Flag                 --dev    --prod
--aot                false    true
--environment        dev      prod
--output-hashing     media    all
--sourcemaps         true     false
--extract-css        false    true
--named-chunks       true     false
--build-optimizer    false    true with AOT and Angular 5

例如

ng build --aot=true --output-hashing=all --sourcemaps=false --extract-css=true --named-chunks=false --build-optimizer true

但这对我不起作用。不为这个环境创建丑陋的代码（这里是开发者）。

如何对其他环境使用相同的构建命令？我如何在其他环境中使用产品优化？

Answer 1

您可以通过在 angular-cli.json 文件或 angular.json

上定义新环境来实现此目的

angular-cli.json:

"environments": {
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts",
  "qa": "environments/environment.qa.ts"
}

angular.json:

"configurations": {
  "production": { ... },
  "qa": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.qa.ts"
      }
    ]
  }
}

然后在环境目录中创建 environment.qa.ts。

在 here

上阅读更多相关信息

Answer 2

如果您想将 dev environment.ts 值与 --prod 优化一起使用，只需使用标志指定：

ng build --prod --environment=dev

这会应用 --prod 设置，但会覆盖 --environment 将使用的环境文件。

在较新的 Angular CLI 版本中更改为 angular.json，将 --environment 替换为 --configuration。由于默认配置使用 environment.ts，只需向其传递一个空字符串，这样环境文件就不会被覆盖，例如 --prod --configuration=

Angular 5 - Dev/QA 使用带有 uglify 和 minify 的 ng build 构建（如 ng build --prod）

Angular 5 - Dev/QA build using ng build with uglify and minify (like ng build --prod)

angular-cli

angular

angular5