使用 WebWorker 时，从导入其他类的文件导入类会导致 Angular 8 编译失败

Question

我正在使用Angular v8。我有一个名为model.ts的文件，如下所示。

import {map} from 'rxjs/operators';
export class Person {
constructor() { }
}

然后，我有一个名为test.worker.ts的 WebWorker 文件，如下所示。

/// <reference lib="webworker" />
import {Person} from './bo/model';
addEventListener('message', ({ data }) => {
const response = `worker response to ${data}`;
postMessage(response);
});

当我输入ng compile时，我得到以下ERROR。

./src/app/test.worker.ts (./node_modules/worker-plugin/dist/loader.js！) 中的错误。/src/app/test.worker.ts) 模块构建失败(来自./node_modules/worker-plugin/dist/loader.js)： 错误：node_modules/rxjs/internal/types.d.ts(45,13)：错误 TS2339：类型"SymbolConstructor"上不存在属性"可观察"。 at AngularCompilerPlugin._update (/Users/jwayne/my-app/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js：767：31) at processTicksAndRejections (internal/process/task_queues.js：89：5) at async AngularCompilerPlugin._make (/Users/jwayne/my-app/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js：658：13)

如果我注释掉import {map} from 'rxjs/operators'，那么我可以编译。导入导入其他库的库是否有限制？

有趣的是，如果我执行此导入import {HttpClient} from '@angular/common/http';，则会收到不同的错误，如下所示。

./src/app/test.worker.ts (./node_modules/worker-plugin/dist/loader.js！) 中的错误。/src/app/test.worker.ts) 模块构建失败(来自./node_modules/worker-plugin/dist/loader.js)： 错误：node_modules/@angular/核心/核心.d.ts(1470,29)：错误 TS2304：找不到名称"元素"。 node_modules/@angular/core/core.d.ts(1471,29)：错误 TS2304：找不到名称"元素"。 node_modules/@angular/core/core.d.ts(1538,26)：错误 TS2304：找不到名称"节点"。 node_modules/@angular/core/core.d.ts(1539,29)：错误 TS2304：找不到名称"节点"。 node_modules/@angular/core/core.d.ts(7082,33)：错误 TS2304：找不到名称"节点"。 node_modules/@angular/core/core.d.ts(8711,81)：错误 TS2304：找不到名称"HTMLElement"。 node_modules/@angular/core/core.d.ts(8822,15)：错误 TS2304：找不到名称"HTMLElement"。 node_modules/@angular/core/core.d.ts(9753,62)：错误 TS2304：找不到名称"元素"。 node_modules/@angular/core/core.d.ts(9755,62)：错误 TS2304：找不到名称"节点"。 node_modules/@angular/core/core.d.ts(9778,59)：错误 TS2304：找不到名称"元素"。 node_modules/@angular/core/core.d.ts(9820,82)：错误 TS2304：找不到名称"HTMLElement"。 node_modules/@angular/core/core.d.ts(10214,83)：错误 TS2304：找不到名称"HTMLElement"。 node_modules/@angular/core/core.d.ts(12863,20)：错误 TS2304：找不到名称"文档"。 node_modules/@angular/core/core.d.ts(12866,13)：错误 TS2304：找不到名称"HTMLElement"。 node_modules/@angular/core/core.d.ts(12874,20)：错误 TS2304：找不到名称"文档"。 node_modules/@angular/core/core.d.ts(12877,13)：错误 TS2304：找不到名称"文档"。 node_modules/@angular/core/core.d.ts(12885,20)：错误 TS2304：找不到名称"文档"。 node_modules/@angular/core/core.d.ts(12888,13)：错误 TS2304：找不到名称"窗口"。 at AngularCompilerPlugin._update (/Users/jwayne/my-app/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js：767：31) at processTicksAndRejections (internal/process/task_queues.js：89：5) at async AngularCompilerPlugin._make (/Users/jwayne/my-app/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js：658：13)

更有趣的是，如果导入import {Observable, of} from 'rxjs';那么我绝对没有错误！这是怎么回事？

请注意，我使用的是 ng-cli v8.0.2。

Answer 1

我不确定rxjs/operators导入有什么问题，但我知道HttpClient导入有什么问题。

问题是 Web Worker 无法访问 DOM(https://stackoverflow.com/a/58414760/10452581)。您不能使用@angular/common，因为它访问 DOM。我正在处理类似的问题(我正在尝试在我的工人中使用管道，它从@angular/common导入)。这非常令人沮丧，因为我使用的方法和类@angular/common与DOM无关。到目前为止，我发现的唯一潜在解决方案是使用在worker之外操作DOM的库做你需要做的事情(如果可能的话)。

TL;DR：你不能在 Web worker 中访问 DOM，甚至不能使用访问它的库，所以如果可能的话，在 worker 之外做。

编辑：作为一个更好的解释，不仅仅是Web工作者无法访问DOM，他们无法访问DOM以确保线程安全。(https://stackoverflow.com/a/56715738/10452581)和(https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#about_thread_safety)。