javascript - 使用 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);
});

当我输入 ngcompile 时，我收到以下错误。

ERROR in ./src/app/test.worker.ts (./node_modules/worker-plugin/dist/loader.js!./src/app/test.worker.ts)Module build failed (from ./node_modules/worker-plugin/dist/loader.js):Error: node_modules/rxjs/internal/types.d.ts(45,13): error TS2339: Property 'observable' does not exist on type '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 import {HttpClient} from '@angular/common/http'; 然后我会收到如下不同的错误。

ERROR in ./src/app/test.worker.ts (./node_modules/worker-plugin/dist/loader.js!./src/app/test.worker.ts)Module build failed (from ./node_modules/worker-plugin/dist/loader.js):Error: node_modules/@angular/core/core.d.ts(1470,29): error TS2304: Cannot find name 'Element'.node_modules/@angular/core/core.d.ts(1471,29): error TS2304: Cannot find name 'Element'.node_modules/@angular/core/core.d.ts(1538,26): error TS2304: Cannot find name 'Node'.node_modules/@angular/core/core.d.ts(1539,29): error TS2304: Cannot find name 'Node'.node_modules/@angular/core/core.d.ts(7082,33): error TS2304: Cannot find name 'Node'.node_modules/@angular/core/core.d.ts(8711,81): error TS2304: Cannot find name 'HTMLElement'.node_modules/@angular/core/core.d.ts(8822,15): error TS2304: Cannot find name 'HTMLElement'.node_modules/@angular/core/core.d.ts(9753,62): error TS2304: Cannot find name 'Element'.node_modules/@angular/core/core.d.ts(9755,62): error TS2304: Cannot find name 'Node'.node_modules/@angular/core/core.d.ts(9778,59): error TS2304: Cannot find name 'Element'.node_modules/@angular/core/core.d.ts(9820,82): error TS2304: Cannot find name 'HTMLElement'.node_modules/@angular/core/core.d.ts(10214,83): error TS2304: Cannot find name 'HTMLElement'.node_modules/@angular/core/core.d.ts(12863,20): error TS2304: Cannot find name 'Document'.node_modules/@angular/core/core.d.ts(12866,13): error TS2304: Cannot find name 'HTMLElement'.node_modules/@angular/core/core.d.ts(12874,20): error TS2304: Cannot find name 'Document'.node_modules/@angular/core/core.d.ts(12877,13): error TS2304: Cannot find name 'Document'.node_modules/@angular/core/core.d.ts(12885,20): error TS2304: Cannot find name 'Document'.node_modules/@angular/core/core.d.ts(12888,13): error TS2304: Cannot find name 'Window'.    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 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 无关。到目前为止，我发现的唯一潜在的解决方案是使用在工作线程之外操作 DOM 的库来完成您需要做的工作(如果可能的话)。

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

编辑:作为一个更好的解释，Web Workers 不仅无法访问 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 )。