Question

我喜欢Angular CLI并将其用于我的所有Angular项目。但是我经常遇到一个用例，这个非常糟糕的官方文档没有帮助。所以冒着将一个问题捆绑得过多的风险，这是我最迫切的问题：

如何配置构建目标以及它们用于什么？官方文档告诉您如何指定它们并区分构建目标和构建环境，但其余部分是您想象的。我认为它确定了一些标志值和不可放样（新词），比如使用UglifyJS。
ng build --app“指定要使用的应用名称或索引。”那个小句子就是所有文件的总和。我有一个案例，一个环境有一个index.html而另一个环境有index.html。我认为这可能是它，但似乎没有。有谁知道如何使用它，或有条件地提供不同的index.html？
我已经配置了两个额外的环境，可以在运行时读取这些值。极好。我想要做的是包括一个额外的脚本来部署我的额外环境。因此，正常的dev和prod会一如既往，但devextra和prodextra会部署一个额外的文件（有点像scripts在{.angular-cli.json中有条件地添加内容1}}。

积分2＆amp; 3用于与其他工具集成。我目前的解决方法是手动编辑index.html。

Answer 1

我找到了第2项和第2项的答案。第一名仍然是一个谜。

以下示例.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 serve相同。
我能够提供不同的输出路径，不同的index.html甚至是一组完全不同的environment文件。另外，请注意这两个配置部署了两个不同（并且完全可信）的脚本文件。实际上，你可以在这里做出很多改变，令人印象深刻。

一些陷阱：

不要惹恼environmentSource。然后它似乎从第一个配置默认为dev环境。
有些旗帜似乎不太好用。我认为deployUrl仅适用于命令行，并且baseUrl根本无法在config中指定。可能还有其他人。
虽然他们允许您更改root，但我真的不明白为什么您不会做一个完全不同的应用。将这超出其设计范围可能是不明智的。

我目前的想法是，我将使用具有多个配置的单个.angular-cli.json，然后创建批处理文件以包裹我的ng build / serve来电。

Angular CLI构建选项

1 个答案: