Angular-cli: Webpack v5 serve rebuild too slow

[xiaoxiangmoe]

🐞 Bug report

Command (mark with an x)

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

Description

Webpack v5 serve rebuild too slow.

🔬 Minimal Reproduction

• ng new angular-v11
• modify app.component.html and app.component.scss as below

<div class="foo">{{title}}</div>

.foo {
  color: blue;
}

• yarn start
• modify color: blue; to color: red;
• see terminal and it will print

Initial Chunk Files | Names  |      Size
styles.css          | styles | 118 bytes

4 unchanged chunks

Build at: 2020-11-19T04:17:28.338Z - Hash: 567ec1ad7718ef48fa96 - Time: 157ms


✔ Compiled successfully.
✔ Browser application bundle generation complete.

• add "resolutions": { "webpack": "5.5.0" } in package.json and yarn install && yarn start
• modify color: red; to color: black;
• see terminal and it will print

⠦ Generating browser application bundles (phase: sealing)...
Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   2.05 MB
polyfills.js        | polyfills     | 141.26 kB
main.js             | main          |  11.21 kB
runtime.js          | runtime       |   6.72 kB
styles.css          | styles        | 118 bytes

                    | Initial Total |   2.21 MB

Build at: 2020-11-19T04:18:51.297Z - Hash: bb747ad918ba033c2fb2 - Time: 1739ms


✔ Compiled successfully.
✔ Browser application bundle generation complete.

In a small project, rebuild time vary from 157ms to 1739ms if we change webpack v4 to v5.

In large project, the rebuild time will vary greatly.

Also the yarn ng serve --hmr does not seem to work in webpack 5.

🌍 Your Environment

Angular CLI: 11.0.1
Node: 15.2.0
OS: darwin x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.1
@angular-devkit/build-angular   0.1100.1
@angular-devkit/core            11.0.1
@angular-devkit/schematics      11.0.1
@angular/cli                    11.0.1
@schematics/angular             11.0.1
@schematics/update              0.1100.1
rxjs                            6.6.3
typescript                      4.0.5

[xiaoxiangmoe]

@alan-agius4 yarn ng serve --hmr does not work in webpack 5.
Console of browser print:

Uncaught TypeError: Cannot read property 'push' of undefined
    at self.webpackHotUpdateangular_v11 (jsonp chunk loading:51)
    at runtime.abbb1600f97b1f23ac16.hot-update.js:1
[HMR] Waiting for update signal from WDS...
Uncaught TypeError: Cannot set property '8901' of undefined
    at self.webpackHotUpdateangular_v11 (jsonp chunk loading:47)
    at styles.abbb1600f97b1f23ac16.hot-update.js:1
Angular is running in development mode. Call enableProdMode() to enable production mode.

So I think this is a critical bug.

[xiaoxiangmoe]

Also, If I update to "@angular/cli": "~11.1.0-next.0", runyarn ng serve --hmr

✔ Compiled successfully.
✔ Browser application bundle generation complete.
⠋ Generating browser application bundles.../Users/user-name/repos/angular-v11/node_modules/@ngtools/webpack/src/ivy/plugin.js:113
                for (const [file, time] of compilation.fileTimestamps) {
                                                       ^

TypeError: compilation.fileTimestamps is not iterable

[alan-agius4]

@xiaoxiangmoe, Webpack 5 support is still opt-in and experimental, hence the non critical nature of this issue.

Webpack 5 compatibility will be improved overtime.

[xiaoxiangmoe]

@alan-agius4 What should I do if our project using webpack 5？ Should I change it back to v4？

[alan-agius4]

If you experiencing issues with Webpack 5, by all means opt-out of it.

[alan-agius4]

https://github.com/angular/angular-cli/pull/19503 and https://github.com/angular/angular-cli/pull/19480 should address this issue in 11.1.

[maximedupre]

@alan-agius4 Since I upgraded to angular 11, ng serve takes 132553ms on my project. It is much longer than before, using webpack 4.