HMR 与 Angular 作为具有平台网络工作者的 Web 工作者运行

Question

我正在尝试使用platformWorkerAppDynamic等实现基于 Web worker 的应用程序，但我在实现 HMR 时遇到了一些困难。

如果我不调用appModule.destroy()那么 HMR 实际上"有效"，因为如果我进行更改，它会热更新并正确重新渲染。但是，我剩下 N 个正在运行的 Web 工作者，其中 N 是它热重载的次数。因此，如果我热重载三次，每次单击按钮都会操作三次。

相反，如果我采用调用appModule.destroy()的 HMR 常用方法，则应用程序会热重载并按预期重新呈现，但任何后续 UI 交互(如按钮单击(都会导致ERROR TypeError: Cannot read property 'events' of null.

例如：

import '@angular/common';
import '@angular/core';
import { platformWorkerAppDynamic } from '@angular/platform-webworker-dynamic';
import { AppModule } from '../app/app.module';
import '../polyfills.ts';
if (module.hot) {
module.hot.accept();
module.hot.dispose(data => {
modulePromise.then(appModule => {
appModule.destroy();
});
});
}
const modulePromise = platformWorkerAppDynamic().bootstrapModule(AppModule);

重新加载 Web worker 模块的正确方法是什么？

Answer 1

经过大量研究，事实证明问题出在 Angular 在platform-webworker中实现 webworker ; 即使在销毁了应用程序模块之后，仍然保留了两个关键侦听器并侦听现在销毁的代码：PostMessageBusSink中的区域订阅和PostMessageBusSource中的事件侦听器。

我创建了一个包含更多详细信息的 GitHub 问题：

https://github.com/angular/angular/issues/24274