Angular Web Worker导入库函数编译失败?

Angular Compile Fails When Importing Library Function into Web Worker?

我有一个看起来像这样的网络工作者。这在以前的 Angular 版本中运行良好:

/// <reference lib="webworker" />
import { ParseResult } from "papaparse";
import { readCSV } from '@fireflysemantics/csv';

addEventListener('message', ({ data }) => {
  const result: ParseResult<any> = readCSV(data)
  postMessage(result);
});

如果我注释掉大部分工人:

/// <reference lib="webworker" />
import { ParseResult } from "papaparse";
//import { readCSV } from '@fireflysemantics/csv';

addEventListener('message', ({ data }) => {
  //const response = `worker response to ${data}`;
  //postMessage(response);
});

然后构建良好。如果我在行中发表评论:

import { readCSV } from '@fireflysemantics/csv';

然后生成所有这些错误:


Error: ./src/app/services/csv.worker.ts (./node_modules/worker-plugin/dist/loader.js?name=0!./src/app/services/csv.worker.ts)
Module build failed (from ./node_modules/worker-plugin/dist/loader.js):
Error: node_modules/@angular/cdk/a11y/aria-describer/aria-describer.d.ts:16:21 - error TS2304: Cannot find name 'Element'.

16     messageElement: Element;
                       ~~~~~~~

    at Object.addError (/home/ole/FireflySemantics/Repository/fireflysemantics/700-CSV/new-csv/csv2/node_modules/@ngtools/webpack/src/webpack-diagnostics.js:24:33)
    at /home/ole/FireflySemantics/Repository/fireflysemantics/700-CSV/new-csv/csv2/node_modules/@ngtools/webpack/src/ivy/diagnostics.js:19:39
    at AngularWebpackPlugin.updateJitProgram (/home/ole/FireflySemantics/Repository/fireflysemantics/700-CSV/new-csv/csv2/node_modules/@ngtools/webpack/src/ivy/plugin.js:379:9)
    at /home/ole/FireflySemantics/Repository/fireflysemantics/700-CSV/new-csv/csv2/node_modules/@ngtools/webpack/src/ivy/plugin.js:157:24
    at SyncHook.eval [as call] (eval at create (/home/ole/FireflySemantics/Repository/fireflysemantics/700-CSV/new-csv/csv2/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (/home/ole/FireflySemantics/Repository/fireflysemantics/700-CSV/new-csv/csv2/node_modules/webpack/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/home/ole/FireflySemantics/Repository/fireflysemantics/700-CSV/new-csv/csv2/node_modules/webpack/lib/Compiler.js:630:30)
    at /home/ole/FireflySemantics/Repository/fireflysemantics/700-CSV/new-csv/csv2/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/ole/FireflySemantics/Repository/fireflysemantics/700-CSV/new-csv/csv2/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/ole/FireflySemantics/Repository/fireflysemantics/700-CSV/new-csv/csv2/node_modules/webpack/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/home/ole/FireflySemantics/Repository/fireflysemantics/700-CSV/new-csv/csv2/node_modules/webpack/lib/Compiler.js:662:28)
    at Compiler.runAsChild (/home/ole/FireflySemantics/Repository/fireflysemantics/700-CSV/new-csv/csv2/node_modules/webpack/lib/Compiler.js:328:8)
    at Object.pitch (/home/ole/FireflySemantics/Repository/fireflysemantics/700-CSV/new-csv/csv2/node_modules/worker-plugin/dist/loader.js:81:18)
 @ ./src/app/services/csv.service.ts 1:0-148
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

Error: node_modules/@angular/cdk/a11y/aria-describer/aria-describer.d.ts:16:21 - error TS2304: Cannot find name 'Element'.

16     messageElement: Element;
                       ~~~~~~~


Error: node_modules/@angular/cdk/a11y/aria-describer/aria-describer.d.ts:39:27 - error TS2304: Cannot find name 'Element'.

39     describe(hostElement: Element, message: string, role?: string): void;
m                             ~~~~~~~


Error: node_modules/@angular/cdk/a11y/aria-describer/aria-describer.d.ts:43:27 - error TS2304: Cannot find name 'Element'.

43     describe(hostElement: Element, message: HTMLElement): void;
                             ~~~~~~~


Error: node_modules/@angular/cdk/a11y/aria-describer/aria-describer.d.ts:43:45 - error TS2304: Cannot find name 'HTMLElement'.

43     describe(hostElement: Element, message: HTMLElement): void;
                                               ~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/aria-describer/aria-describer.d.ts:45:36 - error TS2304: Cannot find name 'Element'.

45     removeDescription(hostElement: Element, message: string, role?: string): void;
                                      ~~~~~~~


Error: node_modules/@angular/cdk/a11y/aria-describer/aria-describer.d.ts:47:36 - error TS2304: Cannot find name 'Element'.

47     removeDescription(hostElement: Element, message: HTMLElement): void;
                                      ~~~~~~~


Error: node_modules/@angular/cdk/a11y/aria-describer/aria-describer.d.ts:47:54 - error TS2304: Cannot find name 'HTMLElement'.

47     removeDescription(hostElement: Element, message: HTMLElement): void;
                                                        ~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/fake-event-detection.d.ts:11:65 - error TS2304: Cannot find name 'TouchEvent'.

11 export declare function isFakeTouchstartFromScreenReader(event: TouchEvent): boolean;
                                                                   ~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/fake-event-detection.d.ts:9:64 - error TS2304: Cannot find name 'MouseEvent'.

9 export declare function isFakeMousedownFromScreenReader(event: MouseEvent): boolean;
                                                                 ~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/focus-monitor/focus-monitor.d.ts:113:22 - error TS2304: Cannot find name 'HTMLElement'.

113     monitor(element: HTMLElement, checkChildren?: boolean): Observable<FocusOrigin>;
                         ~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/focus-monitor/focus-monitor.d.ts:121:33 - error TS2304: Cannot find name 'HTMLElement'.

121     monitor(element: ElementRef<HTMLElement>, checkChildren?: boolean): Observable<FocusOrigin>;
                                    ~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/focus-monitor/focus-monitor.d.ts:126:29 - error TS2304: Cannot find name 'HTMLElement'.

126     stopMonitoring(element: HTMLElement): void;
                                ~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/focus-monitor/focus-monitor.d.ts:131:40 - error TS2304: Cannot find name 'HTMLElement'.

131     stopMonitoring(element: ElementRef<HTMLElement>): void;
                                           ~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/focus-monitor/focus-monitor.d.ts:138:23 - error TS2304: Cannot find name 'HTMLElement'.

138     focusVia(element: HTMLElement, origin: FocusOrigin, options?: FocusOptions): void;
                          ~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/focus-monitor/focus-monitor.d.ts:145:34 - error TS2304: Cannot find name 'HTMLElement'.

145     focusVia(element: ElementRef<HTMLElement>, origin: FocusOrigin, options?: FocusOptions): void;
                                     ~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/focus-monitor/focus-monitor.d.ts:182:20 - error TS2304: Cannot find name 'FocusEvent'.

182     _onBlur(event: FocusEvent, element: HTMLElement): void;
                       ~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/focus-monitor/focus-monitor.d.ts:182:41 - error TS2304: Cannot find name 'HTMLElement'.

182     _onBlur(event: FocusEvent, element: HTMLElement): void;
                                            ~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/focus-monitor/focus-monitor.d.ts:210:41 - error TS2304: Cannot find name 'HTMLElement'.

210     constructor(_elementRef: ElementRef<HTMLElement>, _focusMonitor: FocusMonitor);
                                            ~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/focus-monitor/focus-monitor.d.tsm:97:27 - error TS2304: Cannot find name 'Document'.

97     protected _document?: Document;
                             ~~~~~~~~


Error: node_modules/@angular/cdk/a11y/focus-trap/configurable-focus-trap-factory.d.ts:29:21 - error TS2304: Cannot find name 'HTMLElement'.

29     create(element: HTMLElement, config?: ConfigurableFocusTrapConfig): ConfigurableFocusTrap;
                       ~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/focus-trap/configurable-focus-trap-factory.d.ts:34:21 - error TS2304: Cannot find name 'HTMLElement'.

34     create(element: HTMLElement, deferCaptureElements: boolean): ConfigurableFocusTrap;
                       ~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/focus-trap/configurable-focus-trap.d.ts:26:100 - error TS2304: Cannot find name 'Document'.

26     constructor(_element: HTMLElement, _checker: InteractivityChecker, _ngZone: NgZone, _document: Document, _focusTrapManager: FocusTrapManager, _inertStrategy: FocusTrapInertStrategy, config: ConfigurableFocusTrapConfig);
                                                                                                      ~~~~~~~~
m

Error: node_modules/@angular/cdk/a11y/focus-trap/configurable-focus-trap.d.ts:26:27 - error TS2304: Cannot find name 'HTMLElement'.

26     constructor(_element: HTMLElement, _checker: InteractivityChecker, _ngZone: NgZone, _document: Document, _focusTrapManager: FocusTrapManager, _inertStrategy: FocusTrapInertStrategy, config: ConfigurableFocusTrapConfig);
                             ~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts:129:21 - error TS2304: Cannot find name 'HTMLElement'.

129     create(element: HTMLElement, deferCaptureElements?: boolean): FocusTrap;
                        ~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts:151:41 - error TS2304: Cannot find name 'HTMLElement'.

151     constructor(_elementRef: ElementRef<HTMLElement>, _focusTrapFactory: FocusTrapFactory, _document: any);
                                            ~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts:23:24 - error TS2304: Cannot find name 'HTMLElement'.

23     readonly _element: HTMLElement;
                          ~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts:26:25 - error TS2304: Cannot find name 'Document'.

26     readonly _document: Document;
                           ~~~~~~~~


Error: node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts:36:100 - error TS2304: Cannot find name 'Document'.

36     constructor(_element: HTMLElement, _checker: InteractivityChecker, _ngZone: NgZone, _document: Document, deferAnchors?: boolean);
                                                                                                      ~~~~~~~~


Error: node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts:36:27 - error TS2304: Cannot find name 'HTMLElement'.

36     constructor(_element: HTMLElement, _checker: InteractivityChecker, _ngZone: NgZone, _document: Document, deferAnchors?: boolean);
                             ~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/interactivity-checker/interactivity-checker.d.ts:32:25 - error TS2304: Cannot find name 'HTMLElement'.

32     isDisabled(element: HTMLElement): boolean;
                           ~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/interactivity-checker/interactivity-checker.d.ts:41:24 - error TS2304: Cannot find name 'HTMLElement'.

41     isVisible(element: HTMLElement): boolean;
                          ~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/interactivity-checker/interactivity-checker.d.ts:49:25 - error TS2304: Cannot find name 'HTMLElement'.

49     isTabbable(element: HTMLElement): boolean;
                           ~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/interactivity-checker/interactivity-checker.d.ts:57:26 - error TS2304: Cannot find name 'HTMLElement'.

57     isFocusable(element: HTMLElement, config?: IsFocusableConfig): boolean;
                            ~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/key-manager/list-key-manager.d.ts:101:22 - error TS2304: Cannot find name 'KeyboardEvent'.

101     onKeydown(event: KeyboardEvent): void;
                         ~~~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/live-announcer/live-announcer-tokens.d.ts:11:67 - error TS2304: Cannot find name 'HTMLElement'.

11 export declare const LIVE_ANNOUNCER_ELEMENT_TOKEN: InjectionToken<HTMLElement | null>;
                                                                     ~~~~~~~~~~~


Error: node_modules/@angular/cdk/bidi/dir-document-token.d.ts:24:51 - error TS2304: Cannot find name 'Document'.

24 export declare const DIR_DOCUMENT: InjectionToken<Document>;
                                                     ~~~~~~~~


Error: node_modules/@angular/cdk/bidi/dir-document-token.d.ts:26:49 - error TS2304: Cannot find name 'Document'.

26 export declare function DIR_DOCUMENT_FACTORY(): Document;
                                                   ~~~~~~~~


Error: node_modules/@angular/cdk/observers/observe-content.d.ts:17:22 - error TS2304: Cannot find name 'MutationCallback'.

17     create(callback: MutationCallback): MutationObserver | null;
                        ~~~~~~~~~~~~~~~~


Error: node_modules/@angular/cdk/observers/observe-content.d.ts:17:41 - error TS2304: Cannot find name 'MutationObserver'.

17     create(callback: MutationCallback): MutationObserver | null;
                                           ~~~~~~~~~~~~~~~~


Error: node_modules/@angular/cdk/observers/observe-content.d.ts:31:22 - error TS2304: Cannot find name 'Element'.

31     observe(element: Element): Observable<MutationRecord[]>;
                        ~~~~~~~


Error: node_modules/@angular/cdk/observers/observe-content.d.ts:31:43 - error TS2304: Cannot find name 'MutationRecord'.

31     observe(element: Element): Observable<MutationRecord[]>;
                                             ~~~~~~~~~~~~~~


Error: node_modules/@angular/cdk/observers/observe-content.d.ts:36:33 - error TS2304: Cannot find name 'Element'.

36     observe(element: ElementRef<Element>): Observable<MutationRecord[]>;
                                   ~~~~~~~


Error: node_modules/@angular/cdk/observers/observe-content.d.ts:36:55 - error TS2304: Cannot find name 'MutationRecord'.

36     observe(element: ElementRef<Element>): Observable<MutationRecord[]>;
                                                         ~~~~~~~~~~~~~~


Error: node_modules/@angular/cdk/observers/observe-content.d.ts:60:25 - error TS2304: Cannot find name 'MutationRecord'.

60     event: EventEmitter<MutationRecord[]>;
                           ~~~~~~~~~~~~~~


Error: node_modules/@angular/cdk/observers/observe-content.d.ts:73:76 - error TS2304: Cannot find name 'HTMLElement'.

73     constructor(_contentObserver: ContentObserver, _elementRef: ElementRef<HTMLElement>, _ngZone: NgZone);
                                                                              ~~~~~~~~~~~


Error: node_modules/@angular/cdk/platform/features/shadow-dom.d.ts:11:49 - error TS2304: Cannot find name 'HTMLElement'.

11 export declare function _getShadowRoot(element: HTMLElement): ShadowRoot | null;
                                                   ~~~~~~~~~~~


Error: node_modules/@angular/cdk/platform/features/shadow-dom.d.ts:11:63 - error TS2304: Cannot find name 'ShadowRoot'.

11 export declare function _getShadowRoot(element: HTMLElement): ShadowRoot | null;
                                                                 ~~~~~~~~~~


Error: node_modules/@angular/common/common.d.ts:2679:30 - error TS2304: Cannot find name 'Element'.

2679     abstract getProperty(el: Element, name: string): any;
                                  ~~~~~~~


Error: node_modules/@angular/common/common.d.ts:2684:31 - error TS2304: Cannot find name 'Node'.

2684     abstract remove(el: any): Node;
                                   ~~~~


Error: node_modules/@angular/common/common.d.ts:2685:54 - error TS2304: Cannot find name 'HTMLElement'.

2685     abstract createElement(tagName: any, doc?: any): HTMLElement;
                                                          ~~~~~~~~~~~


Error: node_modules/@angular/common/common.d.ts:2686:36 - error TS2304: Cannot find name 'HTMLDocument'.

2686     abstract createHtmlDocument(): HTMLDocument;
                                        ~~~~~~~~~~~~


9mError: node_modules/@angular/common/common.d.ts:2687:36 - error TS2304: Cannot find name 'Document'.

2687     abstract getDefaultDocument(): Document;
                                        ~~~~~~~~


Error: node_modules/@angular/common/common.d.ts:2692:40 - error TS2304: Cannot find name 'Document'.

2692     abstract getGlobalEventTarget(doc: Document, target: string): any;
                                            ~~~~~~~~


Error: node_modules/@angular/common/common.d.ts:2693:28 - error TS2304: Cannot find name 'History'.

2693     abstract getHistory(): History;
                                ~~~~~~~


Error: node_modules/@angular/common/common.d.ts:2695:31 - error TS2304: Cannot find name 'Document'.

2695     abstract getBaseHref(doc: Document): string | null;
                                   ~~~~~~~~


Error: node_modules/@angular/common/common.d.ts:449:47 - error TS2304: Cannot find name 'Document'.

449 export declare const DOCUMENT: InjectionToken<Document>;
                                                  ~~~~~~~~


Error: node_modules/@angular/core/core.d.ts:10413:62 - error TS2304: Cannot find name 'Element'.

10413 export declare function ɵgetDebugNode__POST_R3__(nativeNode: Element): DebugElement__POST_R3__;
                                                                   ~~~~~~~


Error: node_modules/@angular/core/core.d.ts:10415:62 - error TS2304: Cannot find name 'Node'.

10415 export declare function ɵgetDebugNode__POST_R3__(nativeNode: Node): DebugNode__POST_R3__;
                                                                   ~~~~

readCsv() 方法从 Angular 包格式库导出,如下所示:

export function readCSV(csv: string, config = CSV_DEFAULT_CONFIG): ParseResult<any> {
  return parse(csv.trim(), config);
}

在刚刚升级 Angular 版本之前,这一直运行良好。

有什么想法吗?我无法进行 Stackblitz,因为 Web 工作者不会 运行 在 Stackblitz 上...

环境

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 11.0.7
Node: 12.6.0
OS: linux x64

Angular: 11.0.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.7
@angular-devkit/build-angular   0.1100.7
@angular-devkit/core            11.0.7
@angular-devkit/schematics      11.0.7
@angular/cdk                    11.2.3
@angular/cli                    11.0.7
@angular/material               11.2.3
@schematics/angular             11.0.7
@schematics/update              0.1100.7
ng-packagr                      11.2.4
rxjs                            6.6.6
typescript                      4.0.7

发生这种情况是因为我将组件添加到导出 readCSV 函数的库中。 Angular 编译不允许编译其中包含 DOM API 的依赖项(依赖于 Angular CDK 等),因此出现错误。

解决方案是将组件放在单独的库中。