有没有办法在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 repo 中的相关问题

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

角文档为--configuration=configuration：

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

别名：-c

Answer 2

更新：请参阅已接受的多个配置构建的答案。以下详细信息现已过时

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

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

这些被覆盖与partial在设置选项configurations。来自Angular CLI 工作区维基：

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

此问题评论还提到使用configurations作为覆盖

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

注意：我还没有测试过，这只是基于文档和问题的建议

Answer 3

But this doesn't work for ng serve you say?

Here's what probably happened:

First, here's my configuration for 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"
        }
    ]
}

I have a standard development config, with an added configuration called quick which is what I want to set in addition to the options from development.

(So my quick is the same as OP's en and pl.)

Sorry this isn't a magic new 'quick Angular build' feature (!) - I simply made a copy of my app-routing file, commented out every lazy module except the one I'm currently working with and configured the fileReplacements option to override the standard file. The build is significant faster for a large project. Clearly though I didn't want to accidentally deploy this which is why I needed a separate configuration.

What happens when you run ng serve --configuration development,quick is it looks in the serve part of the configuration (below). As you can see I added quick here as a browser target, referencing what I have above.

"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"
},

What's actually happening when you ask for --configuration development,quick is it merges these two nodes:

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

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

Which results in:

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

Makes sense why it didn't work now :-)

Solution:

The solution is fortunately as simple as updating serve/quick to:

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

Then simply run:

ng-serve --configuration quick

This will in turn will merge your development and quick configurations under architect/build as if you were running ng build.

PS. You may see I'm using customWebpackConfig. That is the @angular-builders/custom-webpack package that allows for customization. It's irrelevant to my answer, but allowed me to prove to myself that it was indeed working as I was able to observe both my customWebpack plugins running and only the single lazy chunk I wanted was built.