[Question]: Is there a limitation to referenced interfaces / imports?

[LuigiDC]

Hello, I have done my first walk with 'observable-webworker' and I am really excited. Everything works as it should. However, I noticed something while using it regarding references.

My project uses ngrx and so depending on the application layer within my project. I have divided different modules with their own substores. Each of these stores contains interfaces that are used to describe the store among other things.

However, the worker is called from a service folder within the main application.

app |---Module 1 | |----Store M1 (with Interfaces) | |---Module 2 | |----Store M2 (with Interfaces)
| |---Services | |----Service 1 | |----ServiceWorker 1 | |----Worker 1

When linking from Worker 1 to one of the interfaces, for example from module M1, errors occur during compilation (interface is not resolved correctly by Angular). But the rest of the application has no problems to use these interfaces via an import.

Currently the solution would be to extract the required interfaces and move them e.g. into a model folder under app/modules.

Is it possible to configure this and is DI through the constructor prohibited as soon as DoWork is used? I could imagine that this is a limitation of the webworkers itself.

Thanks a lot for your support.

Edit: Here the error messages which i get as soon as i use DI through the constructor in a worker file.

Error: node_modules/@angular/core/core.d.ts:1886:13 - error TS2304: Cannot find name 'Node'.
1886     native: Node;
                 ~~~~

Error: node_modules/@angular/core/core.d.ts:7450:33 - error TS2304: Cannot find name 'Node'.
7450     findTestabilityInTree(elem: Node, findInAncestors?: boolean): Testability | null;
                                     ~~~~

Error: node_modules/@angular/core/core.d.ts:9057:28 - error TS2304: Cannot find name 'Node'.
9057         projectableNodes?: Node[][];
                                ~~~~

Error: node_modules/@angular/core/core.d.ts:9841:46 - error TS2304: Cannot find name 'Node'.
9841 export declare function ɵgetDirectives(node: Node): {}[];
                                                  ~~~~

Error: node_modules/@angular/core/core.d.ts:9854:68 - error TS2304: Cannot find name 'Element'.
9854 export declare function ɵgetHostElement(componentOrDirective: {}): Element;
                                                                        ~~~~~~~

Error: node_modules/@angular/core/core.d.ts:10280:83 - error TS2304: Cannot find name 'HTMLElement'.
10280     queuePlayer(player: ɵPlayer, context: ComponentInstance | DirectiveInstance | HTMLElement): void;
                                                                                        ~~~~~~~~~~~

Error: node_modules/@angular/core/core.d.ts:10628:48 - error90m TS2304: Cannot find name 'Document'.
10628 export declare function ɵsetDocument(document: Document | undefined): void;
                                                     ~~~~~~~~

Error: node_modules/@angular/core/core.d.ts:13426:20 - error TS2304: Cannot find name 'Document'.
13426     ownerDocument: Document;
                         ~~~~~~~~

Error: node_modules/@angular/core/core.d.ts:13427:5 - error TS2304: Cannot find name 'HTMLElement'.
13427 }): HTMLElement;
          ~~~~~~~~~~~

Error: node_modules/@angular/core/core.d.ts:13434:20 - error TS2304: Cannot find name 'Document'.
13434     ownerDocument: Document;
                         ~~~~~~~~

Error: node_modules/@angular/core/core.d.ts:13435:5 - error TS2304: Cannot find name 'Document'.
13435 }): Document;
          ~~~~~~~~

Error: node_modules/@angular/core/core.d.ts:13442:20 - error TS2304: Cannot find name 'Document'.
13442     ownerDocument: Document;
                         ~~~~~~~~


Error: node_modules/@angular/core/core.d.ts:13443:6 - error TS2304: Cannot find name 'Window'.
13443 }): (Window & typeof globalThis) | null;

Kind regards

Luigi

[zakhenry]

Hey Luigi, sorry for the late reply - I had missed this issue notification. The issue is that webworkers have a different context to regular application code, this essentially means that you cannot import from angular modules as their definition files reference this (unavailable) context.

It might be possible to configure the webworker tsconfig to ignore typeerror

{
    "compilerOptions": {
        "skipLibCheck": true,
        ...
    },
    ...
}

however this would generally be discouraged in favour of structuring the webworker code to avoid the imports of Angular.

One important thing to consider with webworkers is that on load there is an actual fetch for the source code performed by the browser; as such you want that bundle to be as small as possible, so avoiding adding angular/core to the bundle is recommended.