HMR 是追加而不是替换答案

【问题标题】：HMR is appending instead of replacingHMR 是追加而不是替换
【发布时间】：2018-02-25 21:48:44
【问题描述】：

这是我页面的初始加载：

在更改一些文本后，HMR 会启动，但附加 DOM 而不是替换它：

有没有人知道是什么导致了这个问题？控制台上没有错误。

更新：

我在命令行中使用了 ASP.NET Core with Angular 模板。该模板使用 bootstrap 和 jquery。我想删除这两个组件，因此我想使用 material

【问题讨论】：

这些屏幕截图无法解释您的代码是什么样子或帮助重现问题。
@Claiesi 找到了解决方案。见答案。当我问这个问题时，我完全不知道要搜索什么。

标签： angular webpack material-design webpack-hmr

【解决方案1】：

我想我找到了答案：

我想摆脱 boot.browser.ts 中的 bootstrap 和 jquery。所以我删除了一些涉及引导程序的行：

import 'reflect-metadata';
import 'zone.js';
// removed this line
// import 'bootstrap';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module.browser';

然后我看到了这个块的错误：

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

在评论这些行之后，最终结果是：

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

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

// Note: @ng-tools/webpack looks for the following expression when performing production
// builds. Don't change how this line looks, otherwise you may break tree-shaking.
const modulePromise = platformBrowserDynamic().bootstrapModule(AppModule);

【讨论】：

您应该将问题标记为已回答，这样它就不会受到 SO 的影响
如果可以的话，我会给这个+10！我仍然不明白为什么这会起作用；有人可以详细说明一下吗？