How to use WebWorker in Angular?

Question

im quite new in developing ionic apps and try to outsource a task into a webworker. This is just a little example to understanding the principle.

tabs.ts:

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  constructor() {
        this.worker();
  }

  worker(){
    let myWorker : Worker = new Worker('worker.js');

    myWorker.onmessage = function(event){

            console.log(event.data.value;);

            };

    myWorker.onerror = function(event){
              throw new Error(event.message + " (" + event.filename + ":" + event.lineno + ")");
      }
}
}

worker.js:

self.onmessage = function (event) {
  console.log('recieved');
  self.postMessage({value : event.data.value * 2});
}

self.onerror = function (event) {
    console.log(error);
    self.postMessage(event);
}

My Problem is the Worker dont recieve the messages and just throws an undefined error.

Runtime Error: undefined(undefined:undefined)

Answer 1

You need to put your worker.js file inside the assets folder like so:

let myWorker : Worker = new Worker('../assets/worker.js');