0

Use web worker in Angular 8 has a cross-domain problem when deploying on CDN(https://github.com/angular/angular-cli/issues/14901), so I want to use angular-builder to custom my worker. Angular cli use worker-plugin, and I use the worker-loader to export inline worker.

Here is my code:

app.module.ts

const worker = new Worker('./app.worker.ts', { type: 'module' });

worker.onmessage = event => {
  console.log(`receive message ${event.data}`);
  worker.postMessage('Work done!');
};

app.worker.ts

const worker: Worker = self as any;
let i = 0;

function timedCount() {
  i = i + 1;
  setTimeout(timedCount, 500);
  worker.postMessage(`Hi ${i}`);
}
timedCount();

angular.json

// ...
"customWebpackConfig": {
  "path": "./extra-webpack.config.js",
}

extra-webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.worker\.ts$/,
        use: [
          {
            loader: 'ts-loader'
          },
          { 
            loader: 'worker-loader',
            options: {
              inline: true
            }
          }
        ]
      }
    ]
  }
};

But I get an error page when I run ng serve, how to configure this?

Seven
  • 360
  • 1
  • 4
  • 16
  • I've run into a similar (maybe the same) issue and written it up here at SO (https://stackoverflow.com/questions/56776443/how-do-i-resolve-resource-was-blocked-mime-type-mismatch-in-angular) and created a GitHub example. Mine is based upon the simple example provided by the official Angular docs. – raddevus Jun 27 '19 at 12:09
  • 1
    @raddevus I've seen your issue and mine is `cross-domain` error when deploying on CDN, not the same, thank you for your response. – Seven Jun 28 '19 at 06:22

0 Answers0