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: