1

I have a problem with adding web worker to my Angular 7 app. In "Sources" tab of Chrome DevTools I can see that the web worker is registered but its code doesn't run.

To add the web-worker I use extra entry point in custom webpack config file. To add custom webpack config to Angular I use @angular-builders/custom-webpack and @angular-builders/dev-server. I know that Angular 8 provides support for web workers but I can't make upgrade now.

I use:
Angular CLI: 7.3.9
Angular: 7.2.15
@angular-devkit/architect 0.13.9
@angular-devkit/build-angular 0.13.9
@angular-devkit/build-optimizer 0.13.9
@angular-devkit/build-webpack 0.13.9
@angular-devkit/core 7.3.9
@angular-devkit/schematics 7.3.9
@angular/cli 7.3.9
@ngtools/webpack 7.3.9
@schematics/angular 7.3.9
@schematics/update 0.13.9
rxjs 6.3.3
typescript 3.2.4
webpack 4.29.0

Extract from my AppComponent:

ngOnInit(): void {
  const worker = new Worker('worker.js');
  worker.postMessage('message');
  worker.onmessage = (e: MessageEvent): void => {
    console.log('Message received in main thread');
  };
}

My web worker:

class MyWorker {
  constructor(private worker: any) {
    this.worker.onmessage = (e: MessageEvent): void => {
      console.log('Message received in worker');
      this.worker.postMessage('message');
    };
  }
}

// tslint:disable-next-line: no-unused-expression
new MyWorker(self);

My extra webpack config:

const HtmlWebpackPlugin = require('html-webpack-plugin'),
  path = require('path');

const entryPoints = [
  "inline",
  "polyfills",
  "sw-register",
  "styles",
  "vendor",
  "main",
  'worker'
];

const CONFIG = {
  entry: {
    'worker': 'src/app/worker.ts'
  },
  node: {
    global: true
  },
  output: {
    crossOriginLoading: false,
    filename: '[name].js',
    path: path.join(process.cwd(), 'dist'),
    globalObject: 'this'
  },
  plugins: [
    new HtmlWebpackPlugin({
      cache: true,
      chunks: 'all',
      chunksSortMode: function sort(left, right) {
        let leftIndex = entryPoints.indexOf(left.names[0]);
        let rightIndex = entryPoints.indexOf(right.names[0]);
        if (leftIndex > rightIndex) {
          return 1;
        }
        else if (leftIndex < rightIndex) {
          return -1;
        }
        else {
          return 0;
        }
      },
      compile: true,
      excludeChunks: [
        'worker'
      ],
      favicon: false,
      filename: './index.html',
      hash: true,
      inject: true,
      minify: false,
      showErrors: true,
      template: './src\\index.html',
      title: 'Webpack App',
      xhtml: true
    })
  ]
};

module.exports = CONFIG;

Extract from my angular.json file:

{
...
  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./extra-webpack.config.js",
          "mergeStrategies": {
            "output": "replace"
          }
        },
        ...
      },
      ...
    },
    "serve": {
      "builder": "@angular-builders/dev-server:generic",
      "options": {
        "browserTarget": "example:build"
      },
      ...
    },
  }
...
}

I expect that web worker will run using ng serve command. I've created Github repo with example. I don't receive any errors during compilation or running app in the browser.

Kamil
  • 35
  • 8

0 Answers0