`ng serve --hmr` should apply changes in component styles without reinitialization of the whole app

[th0r]

🚀 Feature request

Command (mark with an x)

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

Description

Currently during ng serve --hmr any change in component styles triggers reinitialization of the whole app. This behavior is far from ideal as route components in most of the apps need to load data asynchronously and their reinitialization triggers this process again, so applying a change in component's styles can't be reviewed immediately (as it should and as it's done in other frameworks like Vue or React).

I've created a reproduction repo:

1. Clone it, run npm ci && npm start and open localhost:4200
2. You'll see Initializing page... and then Page ready. TestPageComponent simulates data loading in it's ngOnInit method.
3. Change this line to something like background-color: blue.
4. TestPageComponent will be reinitialized and you'll be able to review the change only after 3 seconds.

Describe the solution you'd like

I expect changes in component styles to be applied immediately without reinitialization of the host component.

By the way, changes in global styles are applied immediately, as they should.

[alan-agius4]

I did look into a way to achieve this in the past.

This is a non-trivial problem to solve, I will do some investigation but i think the the Framework needs to provide an API. See: angular/angular#39367

[haskelcurry]

One addition: it's not only about the styles.
When I change the lazy componet's code, I can see that only the lazy component module is being reloaded in Network tab (as it should be), but still the whole app reinitializes, which basically makes HMR useless.
In other words, HMR still doesn't work in Angular 11.1.1, in 2021.

[Y2zz]

I am very helpless, which means that Angular is not suitable for building large applications

[sebastian-zarzycki-apzumi]

I am also a bit flummoxed, how hot reloading is still a problem for Angular. Current solution seems very heavy handed, as it reloads whole module. For single-module applications, or applications with bigger modules, that does almost nothing.

[haskelcurry]

Any hopes that this will be addressed any time soon?

[haskelcurry]

Any updates on this important issue?