[cli] Alternate build configurations not working as expected with ng serve

[kawazoe]

🐞 bug report

Affected Package

The is an issue in package @angular/cli. Specifically related to this entry in the documentation: https://angular.io/guide/workspace-config#alternate-build-configurations

Description

The documentation states that multiple configurations can be provided using a comma-separated list, like so: --configuration=state,fr, and that the last one will take precedence.

This behavior works perfectly fine when using ng build --configuration=foo,bar but the implementation breaks down with ng serve. Since the serve command uses browserTarget to select a build configuration, a configuration setup that works for the build command cannot be tested using the serve command.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-ivy-6kdefg?file=angular.json

Running ng build --configuration=production,noaot will correctly disable the aot compiler while keeping the other production settings.
Running ng serve --configuration=production,noaot will cause the build to use ONLY the noaot settings since they all end up bundled under the browserTarget key.

🔥 Exception or Error

This behavior renders the multi-configuration support pretty much useless as it forces developers to choose between using ng serve or using this feature.

While some properties can be directly overrided in the serve schema, not all can be customized. For instance, budgets and file replacements cannot be changed by the serve configuration, which makes it impossible to do something like this:

ng serve --configuration=qa,optimized

Where qa would only provide file replacements and optimized would turn on aot, turn off source maps, etc.

This is an issue for my team since we manage a project with 16 different environments that could be expressed with only 7 configurations if we could use ng serve together with comma-separated configurations.

🌍 Your Environment

Angular Version:

Angular CLI: 10.0.5
Node: 10.22.0
OS: linux x64

Angular: 10.0.8
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.5
@angular-devkit/build-angular     0.1000.5
@angular-devkit/build-optimizer   0.1000.5
@angular-devkit/build-webpack     0.1000.5
@angular-devkit/core              9.1.5
@angular-devkit/schematics        9.1.5
@angular/cli                      10.0.5
@ngtools/webpack                  10.0.5
@schematics/angular               9.1.5
@schematics/update                0.1000.5
rxjs                              6.6.2
typescript                        3.9.7
webpack                           4.43.0

[alan-agius4]

Duplicate of #19013

[kawazoe]

@alan-agius4 Wow! Sorry about that. I don't know what happened there 😧

[alan-agius4]

No worries 😉

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}