Angular-cli: Custom builder with default executeBrowserBuilder implementation breaks differential loading

[JulianH]

🐞 Bug report

Command

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Migrating a custom builder to Angular8 introduced the problem, which was in the 7.x builder api not present.

Description

When adding a custom builder, the differential loading is broken as the build will not generate the right bundle file names.

The custom builder is just using the default implementation of @angular-devkit/build-angular:browser and i dont identify the problem with that approach.

When ng build --prod is used to generate the bundle, then the output is:

chunk {0} runtime.edb2fcf2778e7bf1d426.js (runtime) 1.45 kB [entry] [rendered]
chunk {0} runtime.edb2fcf2778e7bf1d426.js (runtime) 1.45 kB [entry] [rendered]
chunk {2} polyfills.3c79a0eafef8c32a399a.js (polyfills) 36.4 kB [initial] [rendered]
chunk {2} polyfills.3c79a0eafef8c32a399a.js (polyfills) 38.1 kB [initial] [rendered]
chunk {1} main.e81576bad8e4028b19af.js (main) 169 kB [initial] [rendered]
chunk {1} main.e81576bad8e4028b19af.js (main) 188 kB [initial] [rendered]
chunk {3} styles.3ff695c00d717f2d2a11.css (styles) 0 bytes [initial] [rendered]
Date: 2019-11-07T11:34:50.482Z - Hash: 5233111784167bf895ea - Time: 18447ms

As you can see, the es5 and es2015 suffixes of the chunk names are missing.

🔬 Minimal Reproduction

• create a new cli project
• add a custom builder as shown in the following example repo: https://github.com/JulianH/angular8-custom-builder
• run ng build --prod

I've added a 2nd commit which introduce the custom browser-builder. That custom builder is just calling the default implementation: executeBrowserBuilder.

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 8.3.17
Node: 10.13.0
OS: win32 x64
Angular: 8.2.13
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.17
@angular-devkit/build-angular     0.803.17
@angular-devkit/build-optimizer   0.803.17
@angular-devkit/build-webpack     0.803.17
@angular-devkit/core              8.3.17
@angular-devkit/schematics        8.3.17
@angular/cli                      8.3.17
@ngtools/webpack                  8.3.17
@schematics/angular               8.3.17
@schematics/update                0.803.17
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

[JulianH]

Hello @alan-agius4,

i've tested it with the latest 9.0-RC3 release and the problem is still present.

In a similar project https://github.com/just-jeb/angular-builders the maintainer @just-jeb got a feedback from the CLI team:

I have a PR up that should be in the next release that performs a deep clone of the options before passing them to a builder. I unfortunately haven’t had the time to setup a test scenario but this should hopefully address your issue. The behavior also has benefits outside of this scenario as well. Builders should not be able to change the underlying configuration objects and potentially break other builders that could be executed.

That means that hopefully with Angular 9 it will be fixed.

I cannot find a pending PR related to that issue but i really hope, to get the problem fixed before the final 9.0 release

[just-jeb]

@clydin might shed some light on this one.

[code2nguyen]

I found a workaround, you need to change your builderName to browser.....Because it was hardcoded in https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/utils/webpack-browser-config.ts#L73.

Maybe we should add differentialLoading option for generateWebpackConfig function, then change its value from builder.

[just-jeb]

@code2nguyen Not sure this is the root cause. custom-webpack:browser builder name is browser but the issue still persists.
All, seems that the issue still persists in v9. Can we do something about it? @clydin @alan-agius4

[angular-automatic-lock-bot[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._}