This project was generated with Angular CLI version 8.3.25. It is a minimal reproduction of the issue described in angular/angular-cli#17146.
The ng build
and ng serve
commands traverse the webpack compilation differently. This results in divergent experiences when code splitting utilizing wepback optimizations.cachegroups
.
Run npm run build
to run a build
Open index.html
at dist/example/index.html
Observe that angular.[hash:20].js
is not present in the scripts but is present in dist/example
Run npm run serve
to serve the example app on :4200
Inspect Elements in the browser
Note that angular.[hash:20].js
is present in the scripts added to the body
This repo uses ngx-build-plus
to extend the webpack config but any Angular app that extends the config to create cache groups will run into the exact same problem. If the CLI is only going to support adding the 5 hardcoded entry points to the index html and not the chunks created by the entry points also, we will have to extend the index.html creation process as well to accommodate our need in our Enterprise Hybrid app. I'd rather not deviate from the CLI as much as possible.
I've included the webpack-bundle-analyzer
package. By running npm run analyze
you can see a visualization of the bundles created by this app. Note that angular.[hash:20].js
is ~220K of code a user will only download once...until we update to v9.