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

Question

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

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

在我的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 。 我理解这意味着您一次只能指定一种配置。

这意味着我需要创建单独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 团队在其文档中推荐的模式。

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

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

Answer 1

终于有一种方法可以做到，在命令行中指定多个配置：

ng build --configuration=en,production

Angular 回购中的相关问题

请注意，当您使用--configuration时，将忽略--prod标志（因此您需要明确地将production添加到配置列表中）。

--configuration=configuration的角度文档：

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

别名：-c

Answer 2

更新：查看接受的答案以构建具有多种配置的内容。 以下详细信息现已过时

---

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

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

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

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

此问题评论还提到使用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查看配置的服务部分（如下）。 如您所见，我在此处添加了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一样。

---

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

Answer 4

你问的是什么？

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