在使用 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”类型上不存在“可观察”属性。 在 AngularCompilerPlugin._update (/Users/jwayne/my-app/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:767:31) 在 processTicksAndRejections (internal/process/task_queues.js:89:5) 在异步 AngularCompilerPlugin._make (/Users/jwayne/my-app/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:658:13)

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

有趣的是，如果我这样做 import 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/core/core.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：找不到名称“窗口”。 在 AngularCompilerPlugin._update (/Users/jwayne/my-app/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:767:31) 在 processTicksAndRejections (internal/process/task_queues.js:89:5) 在异步 AngularCompilerPlugin._make (/Users/jwayne/my-app/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:658:13)

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

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

Answer 1

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

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

TL;DR：您无法在 web worker 中访问 DOM，甚至无法使用访问它的库，因此请尽可能在 worker 之外进行。

edit：作为一个更好的解释，网络工作者不仅不能访问 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)。