Recently I migrated Angular to 11. In project I'm using web workers for some heavy data processing. Previously, I webworkify-webpack (https://www.npmjs.com/package/webworkify-webpack), but after migration it stopped working. Problem with was with that Angular was not compiling web worker files event if they were added to include. While I was searching for solution I found native support for web workers so I decided to use that, but there is where next problems started. If I try to compile (serve or build) i'm getting error: enter image description here
Configuration: tsconfig.json
{ "compilerOptions": { "baseUrl": "", "declaration": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": ["es2018", "dom"], "mapRoot": "./", "module": "es2020", "moduleResolution": "node", "outDir": "../dist/out-tsc", "sourceMap": true, "target": "es2018", "typeRoots": [ "../node_modules/@types" ] }, "files": [ "main.ts", "polyfills.ts" ], "include": [ "src/**/*.d.ts" ], "exclude": [ "src/**/*.worker.ts" ] } tsconfig.worker.json
/* To learn more about this file see: https://angular.io/config/tsconfig. */ { "extends": "./tsconfig.json", "compilerOptions": { "outDir": "../dist/out-tsc/worker", "lib": [ "es2018", "webworker" ], "types": [] }, "files": [], "include": [ "src/**/*.worker.ts" ] } In angular.json i have:
"webWorkerTsConfig": "src/tsconfig.worker.json"
How I create worker:
this._workerThread = new Worker('../workers/chart-data.worker', {type: 'module'}); And some code sample for worker:
// noinspection JSUnusedGlobalSymbols export default function boot(thread) { // noinspection JSUnusedLocalSymbols const store: ChartDataWorker = new ChartDataWorker(thread); } export class ChartDataWorker {} For now I was able to achive also something like that:
