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

Question

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

import {map} from 'rxjs/operators';

export class Person {
 constructor() { }
}

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

/// <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”上不存在属性“observable”。

    在 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 {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 {Observable, of} from 'rxjs';那么我绝对没有错误！这里发生了什么？

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

Answer 1

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

问题是 Web Workers 无法访问 DOM ( /sf/answers/4089033231/ )。你不能使用，@angular/common因为它访问 DOM。我正在处理类似的问题（我正在尝试在我的工作人员中使用管道，该管道从 导入@angular/common）。这很令人沮丧，因为我使用的方法和类@angular/common与 DOM 无关。到目前为止，我发现的唯一潜在的解决方案是使用在工作线程之外操作 DOM 的库来完成您需要做的工作（如果可能的话）。

TL;DR：您无法在 Web Worker 中访问 DOM，甚至无法使用访问它的库，因此如果可能，请在 Worker 外部进行访问。

编辑：作为一个更好的解释，不仅仅是 Web Worker 无法访问DOM，他们也无法访问DOM 以保证线程安全。（/sf/answers/3970101691/）和（https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#about_thread_safety）。