Angular 4 - how to properly tear down the application?

Question

I need to remove the currently running Angular application from the website and I was trying to do that by getting rid of the HTML app node. However I discovered recently side effects of doing so i.e. some callbacks that Angular installed were not removed.

What is then the proper way to tear down an Angular 4 application?

The current approach that I'm using doesn't seem to be correct:

function tryRemoveApplicationNode() {
  const currentApplicationNode = document.getElementsByTagName('ngk-app')[0];
  if (currentApplicationNode) {
    const parent = currentApplicationNode.parentNode;
    parent.removeChild(currentApplicationNode);
  }
}

Answer 1

At first you need the @angularclass/hmr package:

npm install @angularclass/hmr

This makes your life a bit easier.

You should call destroy on your AppModule in the dispose call of the hot module and after that use the createNewHosts method of the @angularclass/hmr package. You can try this as a hmrBootstrap function:

import {createNewHosts} from '@angularclass/hmr';
import {ApplicationRef, NgModuleRef} from '@angular/core';

export const hmrBootStrap: Function = async (): Promise<void> => {
    module['hot'].accept();
    const ngModule: NgModuleRef<AppModule> = await bootstrap();
    module['hot'].dispose(() => {
        const makeVisible: () => void = createNewHosts(
            ngModule.injector.get(ApplicationRef).components.map(
                c => c.location.nativeElement
            )
        );
        ngModule.destroy();
        makeVisible();
    });
};

And have a normal bootstrap method defined like this:

export const bootstrap: any = (): Promise<NgModuleRef<AppModule>> => {
    return platformBrowserDynamic().bootstrapModule<AppModule>(AppModule);
};

And as a (partial) main.ts you can have this:

if (module.hot) {
    hmrBootStrap();
} else {
    bootstrap();
}