时间戳

首页 > 解决方案 > 带有 Angular 的 HMR 作为带有 platform-webworker 的 web worker 运行

angular - 带有 Angular 的 HMR 作为带有 platform-webworker 的 web worker 运行

问题描述

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

如果我不打电话appModule.destroy()，那么 HMR 实际上“工作”，有点，因为如果我进行更改，它会热更新并正确重新渲染。然而，我留下了 N 个正在运行的网络工作者，其中 N 是它热重新加载的次数。因此，如果我热重载 3 次，则每个按钮单击都会执行 3 次。

相反，如果我使用 HMR 调用的常用方法，appModule.destroy()则应用程序会按预期热重新加载并重新渲染，但任何后续的 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);

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

标签： angularweb-worker

解决方案

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

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

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

推荐阅读