I have a web worker that looks like this. This used to work fine in previous Angular versions:
/// <reference lib="webworker" />
import { ParseResult } from "papaparse";
import { readCSV } from '@fireflysemantics/csv';
addEventListener('message', ({ data }) => {
const result: ParseResult<any> = readCSV(data)
postMessage(result);
});
If I comment out most of the worker:
/// <reference lib="webworker" />
import { ParseResult } from "papaparse";
//import { readCSV } from '@fireflysemantics/csv';
addEventListener('message', ({ data }) => {
//const response = `worker response to ${data}`;
//postMessage(response);
});
Then it builds fine. If I comment in the line:
import { readCSV } from '@fireflysemantics/csv';
Then all these errors are generated:
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__;
~~~~
The readCsv() Method is exported from an Angular Package Format library an looks like this:
export function readCSV(csv: string, config = CSV_DEFAULT_CONFIG): ParseResult<any> {
return parse(csv.trim(), config);
}
This used to work fine until upgrading the Angular version just now.
Any ideas? I can't stackblitz this because web workers don't run on 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
This happened because I added components to the library that exports the readCSV function. The Angular compilation does not allow compiling of dependencies that have DOM APIs in them (Depend on Angular CDK etc.), thus the errors.
The solution will be to put the components in a separate library.