Stack Overflow Asked by Samantha Adrichem on January 21, 2021
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://[email protected]/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.
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.
Answered by Sam on January 21, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP