HMR is added instead of replacing

Question

this is my initial load of my page:

after it changes the text, the HMR will light up, but adds the DOM instead of replacing it:

Does anyone know what might cause this problem? there are no errors on the console.

Update:

I used the ASP.NET core with the Angular template from the command line. This template uses bootstrap and jquery. I would like to remove both components, so I want to use stuff

Answer 1

I think I found the answer:

I wanted to get rid of bootstrap and jquery in boot.browser.ts . So I deleted a few lines referring to the download:

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

then I saw an error in this block:

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

after commenting on these lines the end result:

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