HMR正在追加而不是替换。

Question

这是我页面的初始加载：

在我修改一些文本后，HMR开始运行，但是附加到DOM上而不是替换它：

有人知道是什么原因导致了这个问题吗？控制台没有错误信息。

更新：

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

- Daniel

---

这些截图无法说明你的代码长什么样子，也无法帮助重现问题。 - Claies

@Claiesi找到了解决方案。请查看答案。当我提出问题时，我完全不知道该搜索什么。 - Daniel

Answer 1

我想我找到了答案：

我想要在boot.browser.ts中摆脱bootstrap和jquery。因此，我删除了一些与bootstrap有关的行：

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

- Daniel

---

你应该将问题标记为已回答，这样它就不会被 SO 推到前面了。 - Tseng

如果可以的话，我会给这个+10分！！尽管如此，我仍然不明白为什么它能够工作；有人能详细解释一下吗？ - pulsejet