Angular 4 - 如何正确地关闭应用程序？

Question

我需要从网站中删除当前运行的Angular应用程序，我试图通过摆脱HTML app节点来实现这一点。然而，最近发现这样做会产生一些副作用，例如一些Angular安装的回调函数没有被删除。

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

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

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

- kubal5003

---

你在之前的版本中使用了 bootstrap 吗？即 platformBrowserDynamic().bootstrapModule(your_module)。 - Rach Chen

一个关于我的代码为什么无法运行的问题应该包含代码。 - Günter Zöchbauer

@GünterZöchbauer 这与我的代码无关。我提到从DOM中删除节点并不意味着这是一个可以改进/升级的适当解决方案，因此在这里粘贴它没有意义。 - kubal5003

@RachChen Bootstrap正如其名，引导应用程序而不是拆除它，所以是的，这就是我引导应用程序的方式，但我真的不知道你想表达什么。 - kubal5003

我仍然认为它很可能已经实现了。提供你的代码可以让其他人进行验证。顺便说一下，我没有给你投反对票。 - Günter Zöchbauer

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

- Poul Kruijt

---

Angularclass/HMR 在所有方面都过度了，我特别想避免使用它。它模糊了有关 HMR 的一切，需要他们自己的 webpack 加载器，这是完全不必要的。我已经粘贴了使用 HMR 所需的 50％ 代码。唯一没有正常工作的部分（我仅在两周前发现）是拆卸。您可以在此处查看有关使用 HMR 及其真正所需内容的我的研究。https://medium.com/@kubal5003/angular-4-hot-module-reload-explained-e832ea616304 我将很快更新文章并进行适当的拆卸。 - kubal5003

关于您的回答，请清理掉@angularclass/hmr部分，因为问题是关于Angular拆除的。HMR并不是您想要拆除Angular应用程序的唯一场景。我也会清理掉我的问题中所有与HMR有关的迹象。 - kubal5003

过度设计会导致代码库非常臃肿，而这只需要几行代码而已。总之，据我所见，移除和重新创建应用程序根节点是无法解耦的。请查看他们的 createNewHosts 方法，它似乎是你所需的全部内容。 - Poul Kruijt

Answer 2

唯一需要正确拆除应用程序的是：

//save the NgModuleRef for later
let applicationModule = await platformBrowserDynamic().bootstrapModule(AppModule);

//when it's time:
applicationModule.destroy();

我的答案基于@PierreDuc所示的方向，但不涉及任何形式的HMR。仅出于记录目的放在这里。

- kubal5003