search

angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.75k stars 11.98k forks source link

Fails to Compile when importing library method into web worker #20393

Closed fireflysemantics closed 3 years ago

fireflysemantics commented 3 years ago

🐞 bug report

Is this a regression?

It works in this version:

Angular CLI: 10.0.5
Node: 12.6.0
OS: linux x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.5
@angular-devkit/build-angular     0.1000.5
@angular-devkit/build-optimizer   0.1000.5
@angular-devkit/build-webpack     0.1000.5
@angular-devkit/core              10.0.5
@angular-devkit/schematics        10.0.5
@angular/cdk                      10.1.2
@angular/cli                      10.0.5
@angular/material                 10.1.2
@ngtools/webpack                  10.0.5
@schematics/angular               10.0.5
@schematics/update                0.1000.5
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

Description

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__;
                                                                   ~~~~

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

10444 export declare function ɵgetDirectives(element: Element): {}[];
                                                      ~~~~~~~

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

10457 export declare function ɵgetHostElement(componentOrDirective: {}): Element;
                                                                         ~~~~~~~

Error: node_modules/@angular/core/core.d.ts:10953:83 - error TS2304: Cannot find name 'HTMLElement'.

10953     queuePlayer(player: ɵPlayer, context: ComponentInstance | DirectiveInstance | HTMLElement): void;
                                                                                        ~~~~~~~~~~~

Error: node_modules/@angular/core/core.d.ts:11256:48 - error TS2304: Cannot find name 'Document'.

11256 export declare function ɵsetDocument(document: Document | undefined): void;
                                                     ~~~~~~~~

Error: node_modules/@angular/core/core.d.ts:13854:20 - error TS2304: Cannot find name 'Document'.

13854     ownerDocument: Document;
                         ~~~~~~~~

Error: node_modules/@angular/core/core.d.ts:13857:13 - error TS2304: Cannot find name 'HTMLElement'.

13857     target: HTMLElement;
                  ~~~~~~~~~~~

Error: node_modules/@angular/core/core.d.ts:13865:20 - error TS2304: Cannot find name 'Document'.

13865     ownerDocument: Document;
                         ~~~~~~~~

Error: node_modules/@angular/core/core.d.ts:13868:13 - error TS2304: Cannot find name 'Document'.

13868     target: Document;
                  ~~~~~~~~

Error: node_modules/@angular/core/core.d.ts:13876:20 - error TS2304: Cannot find name 'Document'.

13876     ownerDocument: Document;
                         ~~~~~~~~

Error: node_modules/@angular/core/core.d.ts:13879:14 - error TS2304: Cannot find name 'Window'.

13879     target: (Window & typeof globalThis) | null;
                   ~~~~~~

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

1547     constructor(nativeNode: Element);
                                 ~~~~~~~

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

1548     get nativeElement(): Element | null;
                              ~~~~~~~

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

1634     native: Node;
                 ~~~~

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

1658     readonly nativeNode: Node;
                              ~~~~

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

1659     constructor(nativeNode: Node);
                                 ~~~~

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

7025     findTestabilityInTree(elem: Node, findInAncestors?: boolean): Testability | null;
                                     ~~~~

Error: node_modules/@angular/material/button/button.d.ts:35:43 - error TS2304: Cannot find name 'FocusOptions'.

35     focus(origin?: FocusOrigin, options?: FocusOptions): void;
                                             ~~~~~~~~~~~~

Error: node_modules/@angular/material/core/common-behaviors/common-module.d.ts:39:26 - error TS2304: Cannot find name 'Document'.

39     protected _document: Document;
                            ~~~~~~~~

Error: node_modules/@angular/material/core/line/line.d.ts:24:81 - error TS2304: Cannot find name 'HTMLElement'.

24 export declare function setLines(lines: QueryList<unknown>, element: ElementRef<HTMLElement>, prefix?: string): void;
                                                                                   ~~~~~~~~~~~

Error: node_modules/@angular/material/core/option/option.d.ts:103:24 - error TS2304: Cannot find name 'HTMLElement'.

103     _getHostElement(): HTMLElement;
                           ~~~~~~~~~~~

Error: node_modules/@angular/material/core/option/option.d.ts:116:37 - error TS2304: Cannot find name 'HTMLElement'.

116     constructor(element: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, parent: MatOptionParentComponent, group: MatOptgroup);
                                        ~~~~~~~~~~~

Error: node_modules/@angular/material/core/option/option.d.ts:53:38 - error TS2304: Cannot find name 'HTMLElement'.

53     constructor(_element: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _parent: MatOptionParentComponent, group: _MatOptgroupBase);
                                        ~~~~~~~~~~~

Error: node_modules/@angular/material/core/option/option.d.ts:87:27 - error TS2304: Cannot find name 'KeyboardEvent'.

87     _handleKeydown(event: KeyboardEvent): void;
                             ~~~~~~~~~~~~~

Error: node_modules/@angular/material/core/ripple/ripple-ref.d.ts:39:14 - error TS2304: Cannot find name 'HTMLElement'.

39     element: HTMLElement;
                ~~~~~~~~~~~

Error: node_modules/@angular/material/core/ripple/ripple-ref.d.ts:48:14 - error TS2304: Cannot find name 'HTMLElement'.

48     element: HTMLElement,
                ~~~~~~~~~~~

Error: node_modules/@angular/material/core/ripple/ripple-renderer.d.ts:59:103 - error TS2304: Cannot find name 'HTMLElement'.

59     constructor(_target: RippleTarget, _ngZone: NgZone, elementOrElementRef: HTMLElement | ElementRef<HTMLElement>, platform: Platform);
                                                                                                         ~~~~~~~~~~~

Error: node_modules/@angular/material/core/ripple/ripple-renderer.d.ts:59:78 - error TS2304: Cannot find name 'HTMLElement'.

59     constructor(_target: RippleTarget, _ngZone: NgZone, elementOrElementRef: HTMLElement | ElementRef<HTMLElement>, platform: Platform);
                                                                                ~~~~~~~~~~~

Error: node_modules/@angular/material/core/ripple/ripple-renderer.d.ts:72:45 - error TS2304: Cannot find name 'HTMLElement'.

72     setupTriggerEvents(elementOrElementRef: HTMLElement | ElementRef<HTMLElement>): void;
                                               ~~~~~~~~~~~

Error: node_modules/@angular/material/core/ripple/ripple-renderer.d.ts:72:70 - error TS2304: Cannot find name 'HTMLElement'.

72     setupTriggerEvents(elementOrElementRef: HTMLElement | ElementRef<HTMLElement>): void;
                                                                        ~~~~~~~~~~~

Error: node_modules/@angular/material/core/ripple/ripple.d.ts:69:20 - error TS2304: Cannot find name 'HTMLElement'.

69     get trigger(): HTMLElement;
                      ~~~~~~~~~~~

Error: node_modules/@angular/material/core/ripple/ripple.d.ts:70:26 - error TS2304: Cannot find name 'HTMLElement'.

70     set trigger(trigger: HTMLElement);
                            ~~~~~~~~~~~

Error: node_modules/@angular/material/core/ripple/ripple.d.ts:78:41 - error TS2304: Cannot find name 'HTMLElement'.

78     constructor(_elementRef: ElementRef<HTMLElement>, ngZone: NgZone, platform: Platform, globalOptions?: RippleGlobalOptions, _animationMode?: string | undefined);
                                           ~~~~~~~~~~~

Error: node_modules/@angular/material/icon/icon-registry.d.ts:181:610m - error TS2304: Cannot find name 'SVGElement'.

181     getSvgIconFromUrl(safeUrl: SafeResourceUrl): Observable<SVGElement>;
                                                                ~~~~~~~~~~

Error: node_modules/@angular/material/icon/icon-registry.d.ts:190:67 - error TS2304: Cannot find name 'SVGElement'.

190     getNamedSvgIcon(name: string, namespace?: string): Observable<SVGElement>;
                                                                      ~~~~~~~~~~

Error: node_modules/@angular/material/icon/icon.d.ts:94:40 - error TS2304: Cannot find name 'HTMLElement'.

94     constructor(elementRef: ElementRef<HTMLElement>, _iconRegistry: MatIconRegistry, ariaHidden: string, _location: MatIconLocation, _errorHandler: ErrorHandler);
                                          ~~~~~~~~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:246:31 - error TS2304: Cannot find name 'HTMLElement'.

246     addEventListener(element: HTMLElement, eventName: string, handler: Function): Function;
                                  ~~~~~~~~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:335:26 - error TS2304: Cannot find name 'HTMLElement'.

335     buildHammer(element: HTMLElement): HammerInstance;
                             ~~~~~~~~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:422:59 - error TS2304: Cannot find name 'HTMLMetaElement'.

422     addTag(tag: MetaDefinition, forceCreation?: boolean): HTMLMetaElement | null;
                                                              ~~~~~~~~~~~~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:431:63 - error TS2304: Cannot find name 'HTMLMetaElement'.

431     addTags(tags: MetaDefinition[], forceCreation?: boolean): HTMLMetaElement[];
                                                                  ~~~~~~~~~~~~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:438:35 - error TS2304: Cannot find name 'HTMLMetaElement'.

438     getTag(attrSelector: string): HTMLMetaElement | null;
                                      ~~~~~~~~~~~~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:445:36 - error TS2304: Cannot find name 'HTMLMetaElement'.

445     getTags(attrSelector: string): HTMLMetaElement[];
                                       ~~~~~~~~~~~~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:455:56 - error TS2304: Cannot find name 'HTMLMetaElement'.

455     updateTag(tag: MetaDefinition, selector?: string): HTMLMetaElement | null;
                                                           ~~~~~~~~~~~~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:466:28 - error TS2304: Cannot find name 'HTMLMetaElement'.

466     removeTagElement(meta: HTMLMetaElement): void;
                               ~~~~~~~~~~~~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:664:84 - error TS2304: Cannot find name 'Document'.

664 export declare function ɵangular_packages_platform_browser_platform_browser_f(doc: Document, appId: string): TransferState;
                                                                                       ~~~~~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:671:40 - error TS2304: Cannot find name 'HTMLElement'.

671     abstract addEventListener(element: HTMLElement, eventName: string, handler: Function): Function;
                                           ~~~~~~~~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:724:21 - error TS2304: Cannot find name 'Node'.

724     getProperty(el: Node, name: string): any;
                        ~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:728:21 - error TS2304: Cannot find name 'Node'.

728     onAndCancel(el: Node, evt: any, listener: any): Function;
                        ~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:729:23 - error TS2304: Cannot find name 'Node'.

729     dispatchEvent(el: Node, evt: any): void;
                          ~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:730:18 - error TS2304: Cannot find name 'Node'.

7300m     remove(node: Node): Node;
                     ~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:730:25 - error TS2304: Cannot find name 'Node'.

730     remove(node: Node): Node;
                            ~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:732:42 - error TS2304: Cannot find name 'Document'.

732     createElement(tagName: string, doc?: Document): HTMLElement;
                                             ~~~~~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:732:53 - error TS2304: Cannot find name 'HTMLElement'.

732     createElement(tagName: string, doc?: Document): HTMLElement;
                                                        ~~~~~~~~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:733:27 - error TS2304: Cannot find name 'HTMLDocument'.

733     createHtmlDocument(): HTMLDocument;
                              ~~~~~~~~~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:734:27 - error TS2304: Cannot find name 'Document'.

734     getDefaultDocument(): Document;
                              ~~~~~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:735:25 - error TS2304: Cannot find name 'Node'.

735     isElementNode(node: Node): boolean;
                            ~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:737:31 - error TS2304: Cannot find name 'Document'.

737     getGlobalEventTarget(doc: Document, target: string): EventTarget | null;
                                  ~~~~~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:738:19 - error TS2304: Cannot find name 'History'.

738     getHistory(): History;
                      ~~~~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:739:20 - error TS2304: Cannot find name 'Location'.

739     getLocation(): Location;
                       ~~~~~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:740:22 - error TS2304: Cannot find name 'Document'.

740     getBaseHref(doc: Document): string | null;
                         ~~~~~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:757:31 - error TS2304: Cannot find name 'HTMLElement'.

757     addEventListener(element: HTMLElement, eventName: string, handler: Function): Function;
                                  ~~~~~~~~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:795:23 - error TS2304: Cannot find name 'Node'.

795     addHost(hostNode: Node): void;
                          ~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:796:26 - error TS2304: Cannot find name 'Node'.

796     removeHost(hostNode: Node): void;
                             ~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.tsm:839:31 - error TS2304: Cannot find name 'HTMLElement'.

839     addEventListener(element: HTMLElement, eventName: string, handler: Function): Function;
                                  ~~~~~~~~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:873:31 - error TS2304: Cannot find name 'HTMLElement'.

873     addEventListener(element: HTMLElement, eventName: string, handler: Function): Function;
                                  ~~~~~~~~~~~

Error: node_modules/@angular/platform-browser/platform-browser.d.ts:878:35 - error TS2304: Cannot find name 'KeyboardEvent'.

878     static getEventFullKey(event: KeyboardEvent): string;

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);
}

🔬 Minimal Reproduction

I can't reproduce this because it depends on an internal library.

🌍 Your Environment

Angular Version:



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

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
JoostK commented 3 years ago

The errors you're seeing indicate that there are no DOM typings available in the web worker's compilation unit. I believe that is expected; the web worker is compiled using its own tsconfig.worker.json. It appears that the import of @fireflysemantics/csv is reaching into @angular/cdk (or some of its entry-points) through (transitive) imports, but this library is not meant to be compiled for web workers/without DOM typings so you get the errors.

I can't tell how this could have worked before; I believe this should be failing as it currently does. Perhaps you recently updated @fireflysemantics/csv in a way where it started to depend on @angular/cdk. Or perhaps the tsconfig.worker.json was modified. I can't possibly tell without a reproduction. I understand that the library is private and can't be used for reproduction, so then the quest becomes to reproduce this with a minimal library instead. That is the recommendation for reproductions either way, as the process of creating such minimal reproductions will likely show exactly what scenario is needed to break it.

fireflysemantics commented 3 years ago

@JoostK That makes sense. I put components as well in the library, and so now the library depends on CDK.

However the readCSV function that I'm importing into the web worker does not depend on CDK (Or have any CDK imports in it. I did the following refactoring of the worker and now it compiles fine. Basically I just moved the pieces from the library directly into the worker:

/// <reference lib="webworker" />
import { parse, ParseResult } from "papaparse"

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

export function readCSV(csv: string, config = CSV_DEFAULT_CONFIG): ParseResult<any> {
  return parse(csv.trim(), config);
}
/**
 * Default configuration
 * commonly used when we parse
 * CSV.
 * 
 * It maps the rows to javascript
 * objects and uses commas as the delimiter.
 */
 export const CSV_DEFAULT_CONFIG = {

  delimiter: ",",
  header: true,
  dynamicTyping: true,
  skipEmptyLines: true,
  transformHeader: function (h) {
    return h.trim();
  }
}

/*
import { ParseResult } from "papaparse";
import { readCSV } from '@fireflysemantics/csv';

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

I guess I could break out the components from the @fireflysemantics/csv library ... but It seems a bit odd to have to do this just to get a worker to compile... It seems like we should be able to import code into workers as long as the code being imported can be tree shaken and the part that's being used does not have any of the disallowed constructs.

Would it be possible for the worker compilation to just compile the way everything else compiles...and then if there is a problem the browser should create the error and we can see it in the web developer console?

This is really good to know though. I'll just break up the library for now. Thanks so much for the input!

alan-agius4 commented 3 years ago

Closing as this is working as expected.

A library entrypoint is a single compilation unit, if you import a single function from a library the entire library needs to be compatible with the current compilation type whether it’s a Web Worker, Browser or Node.Js.

The error happens when TypeScript compiler tries to valid the type definitions of the depend library, which happens way before tree-shaking and any JavaScript optimizations.

angular-automatic-lock-bot[bot] commented 3 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.