Angular 角度CLI构建选项

我喜欢Angular CLI，并将其用于我所有的Angular项目。但我时不时地遇到一个非常糟糕的官方文档无法帮助解决的用例。因此，冒着把太多的问题塞进一个问题的风险，以下是我最紧迫的问题：

如何配置构建目标以及它们的用途？官方文档会告诉您如何指定它们，以及如何区分构建目标和构建环境，但剩下的就留给您自己去想象了。我认为它决定了一些标志值和不可隐藏（新词），比如使用

UglifyJS

ng build--app

“指定要使用的应用程序名称或索引。”这句话是所有文档的总和。我有一个例子，一个环境使用一个

index.html

，另一个环境使用另一个

index.html

。我想可能是这样，但似乎不是这样。有人知道如何使用它，或者有条件地提供不同的

index.html

我已经配置了另外两个环境，可以在运行时读取这些值。极好的。我想做的是包括一个额外的脚本，以便为我的额外环境进行部署。因此，正常的

dev

和

prod

始终起作用，但是

devextra

和

prodetra

部署了一个额外的文件（有点像在

中有条件地向
脚本添加一些内容

---

第2点和第3点是为了与另一个工具集成。我目前的解决方法是手动编辑index.html。

我已经找到了第2项和第3项的好答案。第一项仍然是个谜

下面是一个示例

.angular cli.json

，演示了如何执行此操作：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "project-name"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss"
      ],
      "scripts": [
        "somescript.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }, {
      "root": "src",
      "outDir": "../completely/different/folder",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "otherindex.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss"
      ],
      "scripts": [
        "somescript.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.extra.dev.ts",
        "prod": "environments/environment.extra.prod.ts"
      }
    }
  ],
  /* These are empty for brevity */
  "e2e": {},
  "lint": [],
  "test": {},
  "defaults": {}
}

这有点大，大部分都是复制品，让我带你们参观一下

apps

数组实际上有两个对象。通常只有一个，我不确定何时添加了多个应用支持，但这就是

--app

命令行的作用。因此

ng build--app 0

使用第一个对象进行配置，而

ng build--app 1

使用第二个对象。与<代码>ng发球

我能够提供不同的输出路径、不同的index.html，甚至是一组完全不同的

环境

文件。另外，请注意，这两种配置部署了两个不同（而且完全可信）的脚本文件。实际上，这里有太多的变化，令人印象深刻

有几个问题：

不要弄乱

environmentSource

。它似乎只是从第一次配置开始默认为

dev

环境

有几个标志似乎不太好用。我认为

deployUrl

只在命令行上有效，而且

baseUrl

根本不能在config中指定。可能还有其他标志

虽然它们允许您更改

根目录

，但我真的不明白为什么您不干脆做一个完全不同的应用程序。将其扩展到设计范围之外可能是不明智的

我目前的想法是，我将使用一个带有多个配置的

.angular cli.json

，然后创建批处理文件来包装我的

ng build

/

服务

调用