HMR updates entire <app> node instead of counter component #633

New Issue

fergalmoran · 2025-08-09T17:17:03Z

fergalmoran commented

2025-08-09 17:17:03 +00:00

Originally created by @simeyla on 6/25/2017

Running the Angular '4' template and very unclear as to why an update to counter.component.html triggers an update to the entire <app> node - losing state for the component.

I go to the counter page and increment the counter
I edit the HTML at the <app> level using chrome tools
I make an edit to counter.component.html which triggers HMR and the page reloads.

i see that a file http://localhost:5000/dist/0.d3e0c32ca6863139b827.hot-update.js is loaded which contains a single module :

module.exports = "<h1>Counter</h1>\r\n\r\n<p>This is a simple example of an Angular component yay</p>\r\n\r\n<p>Current count: <strong>{{ currentCount }}</strong></p>\r\n\r\n<button (click)=\"incrementCounter()\">THIS IS MY CHANGE</button>\r\n";

So you can see the change is correctly sent over - however the whole page then refreshes instead of just the component.

I can verify if I add an attribute using Chrome to the <app> tag that the whole <app> node gets recreated. I've tried tracing it up in the call stack but that's pretty much an impossible task!

The way i am running this is that I have set development mode with an ENV command, but other than that I'm using an out of the box template and using dotnet run to run it.

What could be causing this? Thanks!

PS. Am I supposed to use the --hot switch ever for creating either client or server webpack files?

*Originally created by @simeyla on 6/25/2017* Running the Angular '4' template and very unclear as to why an update to `counter.component.html` triggers an update to the entire `<app>` node - losing state for the component. * I go to the `counter` page and increment the counter * I edit the HTML at the `<app>` level using chrome tools * I make an edit to `counter.component.html` which triggers HMR and the page reloads. i see that a file `http://localhost:5000/dist/0.d3e0c32ca6863139b827.hot-update.js` is loaded which contains a single module : `module.exports = "<h1>Counter</h1>\r\n\r\n<p>This is a simple example of an Angular component yay</p>\r\n\r\n<p>Current count: <strong>{{ currentCount }}</strong></p>\r\n\r\n<button (click)=\"incrementCounter()\">THIS IS MY CHANGE</button>\r\n";` So you can see the change is correctly sent over - however the whole page then refreshes instead of just the component. I can verify if I add an attribute using Chrome to the `<app>` tag that the whole `<app`> node gets recreated. I've tried tracing it up in the call stack but that's pretty much an impossible task! The way i am running this is that I have set development mode with an ENV command, but other than that I'm using an out of the box template and using `dotnet run` to run it. What could be causing this? Thanks! PS. Am I supposed to use the --hot switch ever for creating either client or server webpack files?

fergalmoran closed this issue

2025-08-09 17:17:03 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#633