Angular 4 - 如何正确拆除应用程序？

Question

我需要从网站上删除当前运行的 Angular 应用程序，我试图通过删除 HTML 应用程序节点来做到这一点。但是我最近发现这样做的副作用，即 Angular 安装的一些回调没有被删除。

那么拆除 Angular 4 应用程序的正确方法是什么？

我目前使用的方法似乎不正确:

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

Answer 1

首先你需要@angularclass/hmr包:

npm install @angularclass/hmr

这会让您的生活更轻松一些。

您应该在 hot 模块的 dispose 调用中调用 AppModule 上的 destroy ，然后使用@angularclass/hmr 包的 createNewHosts 方法。您可以将其作为 hmrBootstrap 函数来尝试:

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

并且有一个普通的 bootstrap 方法定义如下:

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

作为(部分)main.ts，您可以拥有:

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