Angular 11 problem with native web worker - Element

Viewed 429

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:

enter image description here

1 Answers

If you are still looking for an answer, what helped me was to set ECMAscript versions for both, app and worker, to the same version. In my case I bumped everything to es2020.

Related