HMR updates entire <app> node instead of counter component

[simeyla]

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?

[SteveSandersonMS]

This is as expected. While the React/ReactRedux/Aurelia templates are able to preserve state across HMR automatically, the Angular template cannot - it just isn't something Angular can do natively. If you do want that ability in an Angular application, you'll need to look at using something like ng-redux so that your application state is separate from the UI (which also means a completely different application architecture). Sorry there's no easy way to get that feature in an Angular app!