Angular 4, adding a hot swap module instead of swapping

Question

I have a strange problem: replacing the Hot module in my application works fine, but at some point it changed. Instead of replacing a specific component on the page, it adds the component to the top of the page and still leaves a copy of the old component below.

I searched all over Google and also tried to figure out what had changed with very little luck. My WebPack file has not changed at all.

Here is my Webpack.js file .

Angular 4

Visual studio 2017

.Net Core 2.0

Answer 1

.NET Core/ Angular. .

boot.client.ts, , :

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());
    });
}

Answer 2

angular 5.

, .

@angularclass/hmr:

npm install --save-dev @angularclass/hmr

boot.browser.ts( boot.client.ts):

import 'reflect-metadata';
import 'zone.js';
import 'bootstrap';
import { enableProdMode, NgModuleRef, ApplicationRef } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module.browser';
import { createNewHosts } from '@angularclass/hmr';

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

if (module.hot) {
    let ngModule: NgModuleRef<any>;
    module.hot.accept();

    bootstrap().then(mod => ngModule = mod);
    module.hot.dispose(() => {
        const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
        const elements = appRef.components.map(c => c.location.nativeElement);
        const makeVisible = createNewHosts(elements);
        ngModule.destroy();
        makeVisible();
    });
} else {
    enableProdMode();
}

.