Angular 4，热模块替换附加而不是替换

Question

我遇到了一个奇怪的问题，热模块替换在我的应用程序中运行良好已有一段时间，但在最近的某个时候，它发生了变化。它不是替换页面上的特定组件，而是将组件附加到页面顶部，并且仍然在下方保留旧组件的副本。

我在谷歌上搜索过，也试图找出发生了什么变化，但运气很差。我的 WebPack 文件根本没有太大变化。

这是我的 Webpack.js文件。

Angular 4

Visual Studio 2017

.Net核心2.0

Answer 1

我在使用 .NET Core/Angular 模板时遇到过这种情况。此代码段应确保删除旧组件并在热模块替换处理 Hook 期间创建新组件。

如果你有一个 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());
    });
}