有没有办法在 angular.json 中扩展配置？

Question

在构建我的 Angular 6 应用程序时，我需要同时指定 2 件事：

• 如果是生产或开发版本
• 我正在使用的语言环境

在我的angular.json 我有：

"build": {
  ...
  "configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true
    },
    "pl": {
      "fileReplacements": [
        {
          "replace": "src/assets/i18n/translations.json",
          "with": "src/assets/i18n/pl.json"
        }
      ]
    },
    "en": {
      "fileReplacements": [
        {
          "replace": "src/assets/i18n/translations.json",
          "with": "src/assets/i18n/en.json"
        }
      ]
    }
  }
}

但是当我在做ng build --configuration=en --configuration=production 时，我收到了一个错误Configuration 'en,production' could not be found。我理解这意味着您一次只能指定 1 个配置。

这意味着我需要创建单独的en、pl、productionEn、productionPl 配置。虽然不是最干净的模式，但我可以接受。

"build": {
  ...
  "configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true
    },
    "pl": {
      "fileReplacements": [
        {
          "replace": "src/assets/i18n/translations.json",
          "with": "src/assets/i18n/pl.json"
        }
      ]
    },
    "en": {
      "fileReplacements": [
        {
          "replace": "src/assets/i18n/translations.json",
          "with": "src/assets/i18n/en.json"
        }
      ]
    },
    "productionPl": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        },
        {
          "replace": "src/assets/i18n/translations.json",
          "with": "src/assets/i18n/pl.json"
        }
      ],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true
    },
    "productionEn": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        },
        {
          "replace": "src/assets/i18n/translations.json",
          "with": "src/assets/i18n/en.json"
        }
      ],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true
    }
  }
}

但我不能忍受的是复制并粘贴整个production 配置内容到productionEn 和productionPl。如果我添加更多的语言环境，或者我想在构建期间指定的第三个独立方面，那么这种模式将成为维护的噩梦。不幸的是，这似乎是 Angular 团队在他们的 documentation 中推荐的模式。

有没有办法告诉 Angular CLI productionEn 扩展了 production，所以不要多次复制相同的配置代码？类似于下面的代码：

"build": {
  ...
  "configurations": {
    "production": {
      (...)
    },
    "pl": {
      "extends": "production",
      (...)
    },
    "en": {
      "extends": "production",
      (...)
    }
  }
}

Answer 1

终于有办法了，在命令行中指定多个配置：

ng build --configuration=en,production

Relevant issue in Angular repo

注意--prod 标志在使用--configuration 时会被忽略（因此您需要将production 显式添加到配置列表中）。

Angular docs 为--configuration=configuration：

命名的构建目标，在 angular.json 的“配置”部分中指定。每个命名的目标都伴随着该目标的选项默认配置。显式设置它会覆盖“--prod”标志

别名：-c

Answer 2

更新：查看使用多种配置进行构建的公认答案。以下详细信息现已过时

---

阅读一些问题和angular.json 文档，options 似乎是项目的默认值

"architect": {
        "build": {          
          "options": {...}

这些被configurations 中设置的partial 选项覆盖。来自Angular CLI workspace wiki：

configurations (object): A map of alternative target options.
configurationName (object): Partial options override for this builder.

这个issue comment 还提到使用configurations 作为替代

这听起来像是项目的所有默认值都可以添加到 options 对象中，例如将所有重复项从 production、productionPl 移动到 options: {}，然后添加 fileReplacements，以及您需要的其他几个覆盖

注意：我尚未对此进行测试，这只是基于文档和问题的建议

Answer 3

但这不适用于你说的ng serve？

可能发生的情况如下：

首先，这是我对angular12/architect/build/configurations 的配置：

"development": {

    "customWebpackConfig": {
       "path": "custom-webpack.dev.config.js",
       "replaceDuplicatePlugins": true
    },

    "buildOptimizer": false,
    "optimization": false,
    "vendorChunk": true,
    "extractLicenses": false,
    "sourceMap": false,
    "namedChunks": true,
    "aot": true
},

"quick": {

    "fileReplacements": [
        {
            "replace": "src/app/app-routing.module.ts",
            "with": "src/app/app-routing.module.quick.ts"
        }
    ]
}

我有一个标准的开发配置，除了 development 的选项之外，还有一个名为 quick 的附加配置。

（所以我的quick 与OP 的en 和pl 相同。）

抱歉，这不是一个神奇的新“快速 Angular 构建”功能（！） - 我只是复制了我的 app-routing 文件，注释掉了除了我目前正在使用的每个惰性模块并配置了fileReplacements 覆盖标准文件的选项。对于大型项目，构建速度明显更快。显然，虽然我不想意外部署它，但这就是我需要单独配置的原因。

当您运行ng serve --configuration development,quick 时会发生什么，它会查看配置的 serve 部分（如下）。如您所见，我在此处添加了quick 作为浏览器目标，引用了我上面的内容。

"serve": 
{
    "builder": "@angular-builders/custom-webpack:dev-server",

    "options": {
       "browserTarget": "angular12:build"
    },

    "configurations": 
    {
       "production": {
          "browserTarget": "angular12:build:production"
       },
       "development": {
          "browserTarget": "angular12:build:development"
       },
       "quick": {
          "browserTarget": "angular12:build:quick"
       }
    },
    "defaultConfiguration": "development"
},

当您询问--configuration development,quick 时实际发生的情况是它合并了这两个节点：

"development": {
   "browserTarget": "angular12:build:development"
}

"quick": {
   "browserTarget": "angular12:build:quick"
}

结果：

"development": {
   "browserTarget": "angular12:build:development"
}

现在理解为什么它不起作用 :-)

解决办法：

幸运的是，解决方案很简单，只需将serve/quick 更新为：

"quick": {
     "browserTarget": "angular12:build:development,quick"
}

然后简单地运行：

ng-serve --configuration quick

这将反过来将您的development 和quick 配置合并到architect/build 下，就像您在运行ng build 一样。

---

PS。你可能会看到我正在使用customWebpackConfig。那就是允许自定义的@angular-builders/custom-webpack 包。这与我的回答无关，但让我向自己证明它确实有效，因为我能够观察到我的 customWebpack 插件都在运行，并且只构建了我想要的单个惰性块。

Answer 4

你问的是什么？

"scripts": {
    [...]
    "build-i18n": "for lang in en es fr pt; 
       do ng build --config=$lang;
       done"
 }