Adding BrowserAnimationsModule causes hot module replacement failure #533

New Issue

fergalmoran · 2025-08-09T17:16:39Z

fergalmoran commented

2025-08-09 17:16:39 +00:00

Originally created by @tonywr71 on 8/2/2017

I have just attempted to add Angular Material design to an application. During the process, I was testing the counter.component.ts page, by changing the increment to 5 (this.currentCount+=5) and pressing Save. Hot module replacement kicked in, and the page reloaded, doubling up the content.

Counter
This is a simple example of an Angular 2 component.

Current count: 0

Counter
This is a simple example of an Angular 2 component.

Current count: 4

Just to make sure it wasn't me, I loaded up someone else's sample of adding material to the angular starter package from this site, and I have experienced the same thing. Go to this guys page: codeproject example, download his code, get it running (npm install, add @angular/cdk to the package.json and webpack vendors file, run webpack --config webpack.config.vendors.js, then run the application)

Next, go to the counter page, it should show the material button. Click on it a few times to watch the counter go up. Now, without stopping it, go into the counter.component.ts file and change the counter increment: this.currentCount+=25, then click Save. Behind the scenes, webpack will recompile and hot-module-replace, but when the content comes up, it's doubled up.

Any idea how to get HMR to work properly in this situation, or any workaround?

*Originally created by @tonywr71 on 8/2/2017* I have just attempted to add Angular Material design to an application. During the process, I was testing the counter.component.ts page, by changing the increment to 5 (this.currentCount+=5) and pressing Save. Hot module replacement kicked in, and the page reloaded, doubling up the content. ``` Counter This is a simple example of an Angular 2 component. Current count: 0 Counter This is a simple example of an Angular 2 component. Current count: 4 ``` Just to make sure it wasn't me, I loaded up someone else's sample of adding material to the angular starter package from this site, and I have experienced the same thing. Go to this guys page: [codeproject example](https://www.codeproject.com/Tips/1189201/Adding-Angular-Material-in-ASP-NET-Core-Angular-SP?msg=5400987), download his code, get it running (npm install, add @angular/cdk to the package.json and webpack vendors file, run webpack --config webpack.config.vendors.js, then run the application) Next, go to the counter page, it should show the material button. Click on it a few times to watch the counter go up. Now, without stopping it, go into the counter.component.ts file and change the counter increment: this.currentCount+=25, then click Save. Behind the scenes, webpack will recompile and hot-module-replace, but when the content comes up, it's doubled up. Any idea how to get HMR to work properly in this situation, or any workaround?

fergalmoran closed this issue

2025-08-09 17:16:39 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#533