Angular 4, Hot module replacement appending instead of replacing

Question

I'm having a weird issue, Hot module replacement has been working fine in my app for a while, but at some point recently, it has changed. Instead of replacing the specific component on the page, it is appending the component to the top of the page and still leaving a copy of the old component below.

I have searched all over google and also tried to figure out what has changed with very little luck. My WebPack file hasn't changed much at all.

Here is my Webpack.js file.

Angular 4

Visual Studio 2017

.Net Core 2.0

Answer 1

I've had this happen when using the .NET Core / Angular Template. This snippet should ensure the old component is removed and a new fresh one is created during the hot module replacement dispose hook.

If you have a boot.client.ts, see if it contains this:

if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => {

        // Before restarting the app, we create a new root element and dispose the old one
        const oldRootElem = document.querySelector('app');
        const newRootElem = document.createElement('app');

        oldRootElem!.parentNode!.insertBefore(newRootElem, oldRootElem);
        modulePromise.then(appModule => appModule.destroy());
    });
}