Angular 10 webworker Cannot find name 'Element'. - How to resolve?

user_2527425 0
Viewed 2451

So we already had some web workers. But for the purpose of testing these I've removed them all but one, and emptied that one out.

We're currently migrating from webpack (using worker-loader) to ng serve and I used ng generete web-worker to create an initial webworker, adjust our tsconfig and create a tsconfig.worker.json

The empty webworker has a console.log in it and was set up according to the Angular's demo web worker they generated. It looks like this

/// <reference lib="webworker" />

addEventListener('message', (message: any) => console.log(message));

The import of the worker is just:

let worker = new Worker('./worker/converter.worker', {type: 'module'});
worker.addEventListener('message', (event: MessageEvent) => this.receiveWorkerMessage(event), false);

Now Angular and AngularJs compile just fine.

During compile how ever the web worker gives these errors

ERROR in ./src/app/admin/pages/finance/sovendus-export-converter/worker/converter.worker.ts (./node_modules/worker-plugin/dist/loader.js?name=0!./src/app/admin/pages/finance/sovendus-export-converter/worker/converter.worker.ts)
Module build failed (from ./node_modules/worker-plugin/dist/loader.js):

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

1540     constructor(nativeNode: Element);
                                 ~~~~~~~
node_modules/@angular/core/core.d.ts:1541:26 - error TS2304: Cannot find name 'Element'.

1541     get nativeElement(): Element | null;
                              ~~~~~~~
node_modules/@angular/core/core.d.ts:1623:13 - error TS2304: Cannot find name 'Node'.

1623     native: Node;
                 ~~~~
node_modules/@angular/core/core.d.ts:1643:26 - error TS2304: Cannot find name 'Node'.

1643     readonly nativeNode: Node;
                              ~~~~
node_modules/@angular/core/core.d.ts:1644:29 - error TS2304: Cannot find name 'Node'.

1644     constructor(nativeNode: Node);
                                 ~~~~
node_modules/@angular/core/core.d.ts:6898:33 - error TS2304: Cannot find name 'Node'.

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

10086 export declare function ɵgetDebugNode__POST_R3__(nativeNode: Element): DebugElement__POST_R3__;
                                                                   ~~~~~~~
node_modules/@angular/core/core.d.ts:10088:62 - error TS2304: Cannot find name 'Node'.

10088 export declare function ɵgetDebugNode__POST_R3__(nativeNode: Node): DebugNode__POST_R3__;
                                                                   ~~~~
node_modules/@angular/core/core.d.ts:10117:49 - error TS2304: Cannot find name 'Element'.

10117 export declare function ɵgetDirectives(element: Element): {}[];
                                                      ~~~~~~~
node_modules/@angular/core/core.d.ts:10130:68 - error TS2304: Cannot find name 'Element'.

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

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

10918 export declare function ɵsetDocument(document: Document | undefined): void;
                                                     ~~~~~~~~
node_modules/@angular/core/core.d.ts:13508:20 - error TS2304: Cannot find name 'Document'.

13508     ownerDocument: Document;
                         ~~~~~~~~
node_modules/@angular/core/core.d.ts:13511:13 - error TS2304: Cannot find name 'HTMLElement'.

13511     target: HTMLElement;
                  ~~~~~~~~~~~
node_modules/@angular/core/core.d.ts:13519:20 - error TS2304: Cannot find name 'Document'.

13519     ownerDocument: Document;
                         ~~~~~~~~
node_modules/@angular/core/core.d.ts:13522:13 - error TS2304: Cannot find name 'Document'.

13522     target: Document;
                  ~~~~~~~~
node_modules/@angular/core/core.d.ts:13530:20 - error TS2304: Cannot find name 'Document'.

13530     ownerDocument: Document;
                         ~~~~~~~~
node_modules/@angular/core/core.d.ts:13533:14 - error TS2304: Cannot find name 'Window'.

13533     target: (Window & typeof globalThis) | null;

Now I know you can't access the DOM in a web worker.. But the thing is we're not doing that. The web worker is empty. If I remove the import to the worker the error is gone of course.

More data:" Our tsconfig looks like this

{
    "compileOnSave": false,
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "declaration": false,
        "downlevelIteration": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "module": "es2020",
        "moduleResolution": "node",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "target": "es5",
        "paths": {
            "hybrid/*": ["./hybrid/*"],
            "images/*": ["./app/images/*"],
            "layout/*": ["./app/layout/*"],
            "pages/*": ["./app/pages/*"],
            "scripts/*": ["./app/scripts/*"],
            "styles/*": ["./app/styles/*"],
            "translations/*": ["./app/translations/*"],
            "vendor/*": ["./app/vendor/*"]
        },
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2018",
            "dom"
        ]
    },
    "angularCompilerOptions": {
        "fullTemplateTypeCheck": true,
        "strictInjectionParameters": true
    }
}

Our angular.json like this

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "cli": {
        "defaultCollection": "@daisycon/angular-schematics"
    },
    "projects": {
        "my-daisycon": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {
                "@schematics/angular:component": {
                    "style": "scss",
                    "lintFix": true,
                    "skipTests": true
                },
                "@daisycon/angular-schematics:page": {
                    "styleext": "scss",
                    "lintFix": true,
                    "skipTests": true
                },
                "@daisycon/angular-schematics:element": {
                    "styleext": "scss",
                    "lintFix": true,
                    "skipTests": true
                }
            },
            "architect": {
                "build": {
                    "builder": "@angular-builders/custom-webpack:browser",
                    "options": {
                        "styles": ["src/main.scss"],
                        "extractCss": true,
                        "customWebpackConfig": {
                            "path": "./ng2-config/webpack.config.js"
                        },
                        "outputPath": "dist/",
                        "index": "src/layout/daisycon/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.app.json",
                        "assets": [
                            {"glob": ".htaccess", "input": "src/", "output": "/"},
                            {"glob": "favicon.ico", "input": "src/layout/daisycon/", "output": "/"},
                            {"glob": "angular-locale_de-de.js", "input": "./node_modules/angular-i18n/", "output": "/locales/"},
                            {"glob": "angular-locale_de.js", "input": "./node_modules/angular-i18n/", "output": "/locales/"},
                            {"glob": "angular-locale_en-gb.js", "input": "./node_modules/angular-i18n/", "output": "/locales/"},
                            {"glob": "angular-locale_en-us.js", "input": "./node_modules/angular-i18n/", "output": "/locales/"},
                            {"glob": "angular-locale_en.js", "input": "./node_modules/angular-i18n/", "output": "/locales/"},
                            {"glob": "angular-locale_fr-be.js", "input": "./node_modules/angular-i18n/", "output": "/locales/"},
                            {"glob": "angular-locale_fr-fr.js", "input": "./node_modules/angular-i18n/", "output": "/locales/"},
                            {"glob": "angular-locale_fr.js", "input": "./node_modules/angular-i18n/", "output": "/locales/"},
                            {"glob": "angular-locale_nl-be.js", "input": "./node_modules/angular-i18n/", "output": "/locales/"},
                            {"glob": "angular-locale_nl-nl.js", "input": "./node_modules/angular-i18n/", "output": "/locales/"},
                            {"glob": "angular-locale_nl.js", "input": "./node_modules/angular-i18n/", "output": "/locales/"},
                            {"glob": "version.js", "input": "src/", "output": "/"},
                            {"glob": "**/*", "input": "src/app/core/assets/", "output": "/"},
                            {"glob": "**/*", "input": "src/api/", "output": "/api"},
                            {"glob": "**/*", "input": "app/vendor/", "output": "/vendor"},
                            {"glob": "**/*", "input": "./node_modules/codemirror/", "output": "vendor/codemirror/"},
                            {"glob": "**/*", "input": "app/translations/", "output": "translations/"}
                        ],
                        "scripts": [],
                        "stylePreprocessorOptions": {
                            "includePaths": [
                                "./app/styles/_base/_daisycon",
                                "./app/styles/_base",
                                "./node_modules/",
                                "./"
                            ]
                        },
                        "webWorkerTsConfig": "tsconfig.worker.json"
                    },
                    "configurations": {
                        "development": {
                            "fileReplacements": [
                                {
                                    "replace": "src/config/xpartners.config.ts",
                                    "with": "src/config/daisycon.config.ts"
                                },
                                {
                                    "replace": "app/layout/xpartners/logo/logo-sprite.scss",
                                    "with": "app/layout/daisycon/logo/logo-sprite.scss"
                                }
                            ]
                        },
                        "production": {
                            "fileReplacements": [
                                {
                                    "replace": "src/config/xpartners.config.ts",
                                    "with": "src/config/daisycon.config.ts"
                                },
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.prod.ts"
                                },
                                {
                                    "replace": "app/layout/xpartners/logo/logo-sprite.scss",
                                    "with": "app/layout/daisycon/logo/logo-sprite.scss"
                                }
                            ],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": {"scripts": true, "styles": false, "hidden": true, "vendor": false},
                            "aot": true,
                            "extractCss": true,
                            "namedChunks": false,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "2mb",
                                    "maximumError": "5mb"
                                }
                            ]
                        }
                    }
                },
                "serve": {
                    "builder": "@angular-builders/custom-webpack:dev-server",
                    "options": {
                        "browserTarget": "my-daisycon:build",
                        "host": "my.daisycon.com.dev1",
                        "port": 8080,
                        "ssl": true,
                        "sslCert": "./config/resources/ssl/san_domain_com.crt-extensions",
                        "sslKey": "./config/resources/ssl/san_domain_com.key",
                        "proxyConfig": "./config/proxy.conf.js",
                        "disableHostCheck": true
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "my-daisycon:build:production"
                        }
                    }
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "browserTarget": "my-daisycon:build"
                    }
                },
                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                        "main": "src/test.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.spec.json",
                        "karmaConfig": "karma.conf.js",
                        "scripts": [],
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ]
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": [
                            "tsconfig.app.json",
                            "tsconfig.spec.json",
                            "e2e/tsconfig.json",
                            "tsconfig.worker.json"
                        ],
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
                },
                "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                        "protractorConfig": "e2e/protractor.conf.js",
                        "devServerTarget": "my-daisycon:serve"
                    },
                    "configurations": {
                        "production": {
                            "devServerTarget": "my-daisycon:serve:production"
                        }
                    }
                }
            }
        }
    },
    "defaultProject": "my-daisycon"
}

and our webworker ts-config like this

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/worker",
    "lib": [
      "es2018",
      "webworker"
    ],
    "types": []
  },
  "include": [
    "src/**/*.worker.ts"
  ]
}

Our package.json

{
    "name": "@daisycon/mydaisycon",
    "version": "1.0.0",
    "description": "MyDaisycon App",
    "scripts": {
        "analyze:build": "cross-env NODE_ENV=production ANALYZE=true node --max-old-space-size=4096 ./node_modules/webpack/bin/webpack.js -p --progress --color --config ./config/webpack.config.babel.js",
        "dev:purify": "cross-env PURIFY=true NODE_ENV=development webpack-dev-server --config ./config/webpack.config.babel.js",
        "dev:server": "ng serve my-daisycon",
        "dev:server-xp": "ng serve my-xpartners",
        "dev:watch": "ng build --watch my-daisycon",
        "dev:watch-xp": "ng build --watch my-xpartners",
        "production:build": "ng build my-daisycon",
        "production:build-xp": "ng build my-xpartners",
        "compodocs:json": "compodoc -p ./.storybook/tsconfig.json -e json -d .",
        "storybook": "npm run compodocs:json && start-storybook -p 9008 -s src/assets",
        "storybook-build": "npm run compodocs:json && build-storybook -s src/assets",
        "lint": "bash ./tooling/lint.sh",
        "e2e": "ng e2e",
        "kill": "taskkill /F /IM node.exe",
        "tooling:update-backend": "start cmd.exe /k %DEV_WORK_DIR%/my.daisycon.com/tooling/update-backend.bat",
        "tooling:generate-models": "node ./tooling/generate-models.js"
    },
    "devDependencies": {
        "@angular-builders/custom-webpack": "10.0.1",
        "@angular-devkit/build-angular": "0.1002.0",
        "@angular/cli": "10.2.0",
        "@angular/compiler-cli": "10.2.3",
        "@angular/language-service": "10.2.3",
        "@compodoc/compodoc": "1.1.11",
        "@daisycon/angular-schematics": "0.0.7",
        "@storybook/addon-actions": "5.3.18",
        "@storybook/addon-backgrounds": "5.3.18",
        "@storybook/addon-docs": "5.3.18",
        "@storybook/addon-knobs": "5.3.18",
        "@storybook/addon-links": "5.3.18",
        "@storybook/addon-viewport": "5.3.18",
        "@storybook/angular": "5.3.18",
        "@types/jasmine": "3.5.0",
        "@types/jasminewd2": "2.0.8",
        "@types/jquery": "3.3.31",
        "@types/node": "12.12.44",
        "angular-gettext-loader": "1.0.1",
        "codelyzer": "6.0.1",
        "countries-enum": "git+https://gist.github.com/646386d5edc174e8b549111572897f81.git",
        "expose-loader": "1.0.1",
        "file-loader": "6.2.0",
        "html-loader": "0.5.5",
        "jasmine-core": "~3.5.0",
        "jasmine-spec-reporter": "~5.0.0",
        "json-loader": "0.5.7",
        "karma": "~5.0.0",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage-istanbul-reporter": "~3.0.2",
        "karma-jasmine": "~4.0.0",
        "karma-jasmine-html-reporter": "^1.5.0",
        "ngtemplate-loader": "git+https://github.com/DaisyconBV/ngtemplate-loader.git",
        "po2json": "1.0.0-alpha",
        "protractor": "~7.0.0",
        "storybook-addon-paddings": "2.0.2",
        "taskkill": "3.1.0",
        "ts-node": "9.0.0",
        "tslint": "~6.1.0",
        "typescript": "4.0.5"
    },
    "dependencies": {
        "@amcharts/amcharts4": "4.7.19",
        "@angular/animations": "10.2.3",
        "@angular/common": "10.2.3",
        "@angular/compiler": "10.2.3",
        "@angular/core": "10.2.3",
        "@angular/forms": "10.2.3",
        "@angular/localize": "10.2.3",
        "@angular/platform-browser": "10.2.3",
        "@angular/platform-browser-dynamic": "10.2.3",
        "@angular/router": "10.2.3",
        "@angular/upgrade": "10.2.3",
        "@ctrl/ngx-codemirror": "2.1.1",
        "@fortawesome/fontawesome-pro": "5.12.0",
        "@fortawesome/fontawesome-svg-core": "1.2.26",
        "@fortawesome/free-brands-svg-icons": "5.12.0",
        "@fortawesome/pro-duotone-svg-icons": "5.12.0",
        "@fortawesome/pro-light-svg-icons": "5.12.0",
        "@fortawesome/pro-regular-svg-icons": "5.12.0",
        "@fortawesome/pro-solid-svg-icons": "5.12.0",
        "@ng-select/ng-select": "4.0.0",
        "@ngx-translate/core": "11.0.1",
        "@ngx-translate/http-loader": "4.0.0",
        "@uirouter/angular": "6.0.1",
        "@uirouter/angular-hybrid": "10.0.1",
        "@uirouter/angularjs": "1.0.26",
        "@uirouter/core": "6.0.5",
        "@uirouter/rx": "0.6.5",
        "@uirouter/visualizer": "7.0.0",
        "alasql": "0.4.11",
        "angular": "1.8.0",
        "angular-animate": "1.8.0",
        "angular-cache": "4.6.0",
        "angular-cookies": "1.8.0",
        "angular-daterangepicker": "0.2.3-alpha1",
        "angular-dynamic-locale": "0.1.37",
        "angular-gettext": "2.4.1",
        "angular-gridster2": "9.1.0",
        "angular-i18n": "1.8.0",
        "angular-media-queries": "0.6.1",
        "angular-messages": "1.8.0",
        "angular-rollbar": "1.0.0",
        "angular-sanitize": "1.8.0",
        "angular-ui-bootstrap": "2.5.6",
        "angular-ui-codemirror": "git+https://github.com/DaisyconBV/ui-codemirror.git",
        "animate.css": "3.7.2",
        "blockadblock": "3.2.1",
        "bootstrap": "3.4.1",
        "bootstrap-chosen": "1.4.2",
        "canvas": "2.6.1",
        "chosen-js": "1.8.7",
        "codemirror": "5.49.2",
        "core-js": "2.6.10",
        "file-saver": "1.3.8",
        "headroom.js": "0.9.4",
        "http-status-codes": "1.3.2",
        "jquery": "3.5.1",
        "jquery-mousewheel": "3.1.13",
        "jquery-slimscroll": "1.3.8",
        "jquery-ui": "1.12.1",
        "jsdom": "13.2.0",
        "jszip": "3.5.0",
        "lodash": "4.17.15",
        "moment": "2.24.0",
        "my.daisycon.com-translations": "git+ssh://git@bitbucket.org/daisycontech/my.daisycon.com-translations.git#master",
        "ng-file-upload": "12.2.13",
        "ng-infinite-scroll": "1.3.0",
        "ng-rollbar": "2.4.2",
        "ng2-mmbreakpoints": "0.6.2",
        "ng5-slider": "1.2.4",
        "ngclipboard": "1.1.2",
        "ngx-bootstrap": "5.6.1",
        "ngx-clipboard": "12.2.1",
        "ngx-file-drop": "9.0.0",
        "ngx-ui-switch": "8.2.0",
        "ngx-webstorage-service": "4.1.0",
        "restangular": "https://github.com/DaisyconBV/restangular.git#master",
        "rollbar": "2.13.0",
        "rxjs": "6.5.3",
        "rxjs-compat": "6.5.3",
        "sweetalert2": "8.18.4",
        "textcomplete": "0.14.5",
        "ts-md5": "1.2.6",
        "tslib": "^2.0.0",
        "xlsx": "0.14.5",
        "xmldom": "0.1.31",
        "zone.js": "0.10.3"
    }
}

As you can see nothing really special, except that we use the custom webpack builder from angular so that we can still run hybrid and load AngularJs templates.

angular web-worker
2 Answers

Audit every reference that the Web Worker has to other code. Including unused references. If any code in your worker references code not in the webworker lib as configured in your .tsconfig, then your code will not compile.

From your compilation message, it appears that converter.worker.ts references some code that does an import {...} from '@angular/core'.

When the whole process is processed by webpack, the statement new Worker('./worker/converter.worker', {type: 'module'}); is detected by worker-plugin (added by the angular builder). The WorkerPlugin then tells webpack to create a separate bundle for ./worker/converter.worker and all code that is referenced from that entry point. When that bundle gets to the TypeScript compiler, the TypeScript compiler will compile that entire bundle with using the .tsconfig specified by the entry point, i.e. converter.worker.ts.

If any code has an import statement, that code will be included in the bundle for compilation whether or not that code is actually using the import statement. In my case, I had used ng generate service to create a dependency of my worker, and the generator automatically put @angular/core import in. I removed the @Inject annotation, but left in the import statement. The compilation failed until I removed the unused import.

user_25249340

I encountered a similar issue when trying to implement web workers in an Angular 11 project.  Here are the things that helped me resolve similar errors that were reported in original question.  

1. Double check all imported module dependencies. 

This is the same as the previous answer and the most common answer to similar web worker build issues.

Use specific module import paths.  This was a problem for me because I had imports referencing a root multi-module directory.  This was essentially importing everything defined in the index.d.ts file in that directory.  Some of those "unused" modules I wasn't even intending to import had references to @angular/core/Injectable. For example:

Potentially bad implementation:

import { Module1, Module2 } from '../awesome_modules_root';

Better Implementation:

import { Module1 } from '../awesome_modules_root/module1';
import { Module2 } from '../awesome_modules_root/module2';

2. Ensure you don't have any other code files with aforementioned module import issues that match the tsconfig.worker.json include template. 

This is the problem that more resembled what the question author was experiencing.  For simplicity let's say I have job1.worker.ts and job2.worker.ts. I found that even though I fixed all the module import issues in as mentioned in step #1 above for the first file job1.worker.ts, my second file job2.worker.ts in my branch still had module import issues. I thought that since my app code wasn't actually implementing/referencing job2.worker.ts at all, it would ignore it.  However, since the tsconfig.worker.json file is defined with:

  {
    ...
    "include": [
      "src/**/"*.worker.ts"
    ] 
  }

It was including job2.worker.ts in the TS transpilation process during the build. During the Angular build the errors being reported were only referencing job1.worker.ts. This is because that was the only worker code that was actually implemented/referenced in the app and being loaded up by webpack.  This was what confused me because I had fixed all the module imports in job1.worker.ts. I performed the following steps to validate my findings:

  • Deleted job2.worker.ts temporarily, rebuilt the app, and the errors no longer occurred. 
  • Reinstated job2.worker.ts, rebuilt the app, errors occurred again.
  • Fixed all the module imports in job2.worker.ts like in step #1 above, rebuilt the app, errors no longer occurred.  

I know it has been a while since the original question was asked, but I thought this might help someone somewhere, now and in the future.

user_123445860
Related