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。

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 {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 {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无关，所以这非常令人沮丧。到目前为止，我发现的唯一可能的解决方案是使用在工作程序外部操作DOM的库进行所需的工作（如果可能）。

TL; DR：您无法在网络工作程序中访问DOM，甚至无法使用访问它的库，因此，如果可能，请在工作程序之外进行访问。

edit：作为一个更好的解释，不仅仅是Web工作人员不能访问 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）。

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

1 个答案: