HMR is appending instead of replacing

Question

this is my initial load of my page:

after ich change some text the HMR get fired up, but appends the DOM instead of replacing it:

does anybody have a clue what could cause this issue? there are no errors on console.

Update:

i used the ASP.NET Core with Angular Template from Command Line. This Template uses bootstrap and jquery. I would like to delete both components hence i want to use material

Frulla

these screenshots don't do anything to explain what your code looks like or help reproduce the issue. – Takao

@Claiesi found a solution. see answer. when i was asking the question i hab absolutely no clue what to search. – Frulla

Answer 1

I guess i found an answer:

i wanted to get rid of bootstrap and jquery in boot.browser.ts. So i deleted some lines referring to 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';

then i saw the error at 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 those lines the final result is:

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

Frulla

You should mark the question as answered, so it doesn't get bumped by SO – Listlessness

Would've given this +10 if I could!! I still don't understand why this is working though; can someone elaborate a bit? – Mcdougal