Is there a way to extend configurations in angular.json?

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.


There finally is a way to do it, specifying multiple configurations in the command line:

ng build --configuration=en,production

Relevant issue in Angular repo

Note that --prod flag is ignored when you use --configuration (so you need to add production to the configuration list explicitly).

Angular docs for --configuration=configuration:

A named build target, as specified in the "configurations" section of angular.json. Each named target is accompanied by a configuration of option defaults for that target. Setting this explicitly overrides the "--prod" flag

Aliases: -c


Update: see accepted answer for building with multiple configurations. The details below are now outdated


Reading through some issues and angular.json documentation, it appears that the options act as the defaults for the project

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

These are overridden with partial options set in the configurations. From the Angular CLI workspace wiki:

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

This issue comment also mentions using configurations as an override

This sounds like all of the defaults for the project can be added to the options object e.g. move any duplicates from production, productionPl to the options: {}, and then add the fileReplacements, and the few other overrides that you require

Note: I have not tested this yet, it's just a suggestion based on the docs and issues