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?

[ronben2311]

i just saw this post, wish i saw it earlier. onNgInit being initialized each time using hmr. thus ajax service function inside onNgInit being called. and i lose data.
now i undersatnd that its not working as needed. i hate this framework.

[sebastian-zarzycki-apzumi]

In all fairness, this is actually expected, the framework needs to instantiate the component again, because its internal code could change (i.e. things added to ngOnInit). Not sure why you would lose data, if you're actually calling for them during ngOnInit.

[haskelcurry]

Yes, the component re-intialization is fine. Actually @ronen009 the fact that you do an HTTP call inside of your component is a sign of bad architecture: the component should be "thin" and care only about the UI logic.
Extract the method with HTTP call in a separate service and memoize the method, and then after hot module reload the real call will be done only the first time.
I mean, it SHOULD 🙂 Currently HMR sucks so much that it reloads everything even on CSS change, so...
But at least this will be fair now @sebastian-zarzycki-es right?

[haskelcurry]

Btw here's my workaround for now, guys: I use Nrwl Nx with Storybook, and HMR for Storybook works just perfectly! Because it has it's own Webpack configuration. Just try it out it's amazing! If I change CSS, it reloads only CSS portion. Same goes for HTML and TS.

[sebastian-zarzycki-apzumi]

The call has to originate from somewhere, though, even if its implementation is abstracted into a separate service. Memoizing the result and adding your own HMR-related code just to "make it snappier" seems like a completely wrong way to go to me. There should be no HMR-related code at all.

In such cases, there's just simply no way of overcoming this. If you change something in a component that initiates a call, every reload would cause that call to happen. That's ok, it's just a consequence of what this particular component does. On a component-level this is acceptable. What is not acceptable is that it goes for the whole module every time.

[haskelcurry]

@sebastian-zarzycki-es Well in my (large) project, I have a whole "dev cache" made with HTTP interceptor, that caches all the responses in a local DB (stripped out in prod build). + I made a Devtools panel to control that. When your HTTP request takes seconds, and when you have tons of HTTP requests per module, tricks to "make it snappier" start to make sense. I totally get your point tho

[sebastian-zarzycki-apzumi]

I would argue that if you need many costly calls to reload a single page, then it's a sign that something should be redesigned there. But, yeah, it's IT, corner cases happen all the time. It can be helpful for a specific situation like yours, but it shouldn't be a prerequisite for HMR to work efficiently, as other technologies show us that it is entirely possible for HMR to work way way better.

[haskelcurry]

🤝 To sum up, it's an expected behavior, it's OK, and it's not related to this current issue.
(and there are various ways to achieve what you need @ronen009)

[alan-agius4]

Let's keep tracking this issue here angular/angular#39367 since this is not possible without changes in the framework.

Please thumbs up the mentioned issue, if you'd like this feature to be added.

[haskelcurry]

@alan-agius4 It's NOT related to CSS only (read this thread please).
So you guys say: it's impossible currently, let's close it? Instead of making the framework suitable for 2021. At least place this on the official roadmap, if possible, please...

[alan-agius4]

Any changes to a component or module at the moment will need a full application re-initialization.

As per angular/angular#39367 (comment) without an API from the framework we cannot patch updates to component templates, styles and so on… and hence the why we are tracking this issue in angular/angular#39367

[sebastian-zarzycki-apzumi]

This framework is being rewritten and then rewritten and then rewritten again ad nauseam, while important development features like this linger for, apparently, 5 years.

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