2

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 Answer 1

0

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.