[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]

Hi @kawazoe,

When using ng serve --configuration= production,noaot you are overridden the browserTarget, where the last-set value is the final one, which in your case will be demo:build:noaot. This doesn't reference the production configuration.

From the use-case explained above, instead of specifying addition configurations under the dev-server builder, it would be better to use the browserTarget option. directly from the CLI like so;

ng serve --browser-target demo:build:production,noaot

[kawazoe]

Thanks for the quick reply! This is some great info. The docs do not hint that comma-separated values can be used anywhere else than the configuration parameter. It would be great if this was made more clear in the docs.

[alan-agius4]

The browser-target is in the format of <project-name>:<target>:<configuration> that is why It works.

There is already an issue to better describe this: #16572

[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.}