3

I have angular app created with Angular CLI. I want to use Web Worker for creating thread.
My idea is to do heavy calculation in background thread and post back response to the main thread once completed.

I have worker.js

self.addEventListener('message', (evt) => {
  switch (evt.data.cmd) {
    case 'CALCULATE':{
      let payload = evt.data.payload;
      let response = calculateFunction(payload);    
      let response = {
        cmd: 'RESPONSE',
        payload: response 
      }
      postMessage(response);
      break;
    }
    default:
      throw Error(`Invalid command: ${evt.data.cmd}`);
    }
});

In Component :

private worker: Worker;
constructor() {
    this.initWebWorker();
}

initWebWorker(){
 let url = '/dist/assets/workers/worker.js';
 this.worker = new Worker(url);
 this.worker.addEventListener('message', (evt)=>{
  switch (evt.data.cmd) {
    case 'RESPONSE':{
      let payload = evt.data.payload;
      console.log(payload)
      break;
    }
    default:
      throw Error(`Invalid command: ${evt.data.cmd}`);
   }
  });
 }

Posting message to Worker from component

this.worker.postMessage({cmd: 'CALCULATE', payload: payload});

This is working as expected. But I have couple of questions as

  1. I have placed worker.js in assets folder so that it should get copied on ng build
  2. worker.js is JS file not TS. I hope I can use TS instead
  3. To use TS I can add entry in webpack.config and it will generate bundle for me. But I don't want to eject webpack configuration from Angular CLI project
  4. I have checked this package but with this I can only run the function is thread, I want code separation of all the function related for computation in worker file

So how can I use Web worker in Angular CLI project better way. I tried to search for the same but not found good article on this.

Reference: Angular CLI generated app with Web Workers

Dipak Telangre
  • 1,792
  • 4
  • 19
  • 46

0 Answers0