Angular 4.2.2: app component tag stacked instead of replacing the old one

[almothafar]

I was trying to upgrade my Angular from 4.1.3 to 4.2.2, but got a critical issue that the component stacked instead of replacing it:

Downgrade solved issue, also, I tried to kill node.exe and run again the app, the issue was still occurring.

[ValentinFunk]

Having the same issue

[p3140]

+1
May be related to this one ?

[hrfarrokh]

me too

[jeandormehl]

Any news on this?

[ValentinFunk]

I have found a bit of a workaround for this by manually removing the element:

@NgModule({ ... })
class AppModule {
  constructor(public appRef: ApplicationRef) { }
  hmrOnDestroy() {
    const cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
    // ...
    cmpLocation.forEach(elem => {
      (elem as any).remove();
    });
  }
}

[jeandormehl]

@kamshak This method does indeed remove the additional app components appended onto the bottom of the page but all styling and input values are also lost for modals/popups.

[atomdmac]

+1

Saw this after re-building a docker image that was previously working fine. I thought I was going crazy. Downgrading "fixed" it.

[admosity]

Opened a PR based on what was said here, but haven't quite battle tested it. Using it now and it seems okay. @gdi2290 any idea what it might be?

[rafinskipg]

+1 hmr is not working for new releases of angular. And downgrading angular is not a good solution ;)

[superstarmcawesome]

I'm still seeing this in 4.4.4 and 4.4.6.