HMR 是附加而不是替换

HMR is appending instead of replacing

这是我页面的初始加载:

在更改一些文本后,HMR 被激活,但 附加 DOM 而不是替换它:

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

更新:

我在命令行中使用 ASP.NET 核心和 Angular 模板。 此模板使用 bootstrapjquery。我想删除这两个组件,因此我想使用 material

我想我找到了答案:

我想摆脱 bootstrapjqueryboot.browser.ts。所以我删除了一些引用 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);