Web worker in Angular CLI

Question

I have been working on Angular app which has heavy computation on client side due to which UI get blocked. I wanted to use Web worker in Angular CLI project to run UI in one thread and heavy processing in background thread.

Does anyone have thoughts on

• How to handle heavy computation in angular.
• How to use Web Workers in Angular CLI

Some references
Angular CLI generated app with Web Workers
https://github.com/angular/angular-cli/issues/5885

Answer 1

You can use https://www.npmjs.com/package/angular2-web-worker

Inject the web worker service into your constructor:

 construtor(private webWorkerService: WebWorkerService){
     this.webWorkerService.run( thing to run goes here );
 }

Answer 2

I am not sure which Angular version your are trying to run with web worker so I am providing all the details that I have for running Angular with Web worker.

In order to use Web Workers in your Angular App you have two choices:

1. Run all the business logic of your App in different Web Worker thread.
2. Run Some of CPU intensive logic of your App in Web worker thread. The rest of the application will keep running in Main thread.

---

Choice #1 with Angular 6 generated using Angular CLI 6:

Article: Using web workers with Angular 6

---

Choice #1 with Angular 5 or below generated using Angular CLI 1:

Blog: Angular with Web Worker: Step by Step

---

Choice #2 With Angular 5 or Angular 6

SlideShare: Web Worker in your Angular Application

---

All these references do have a sample code reference available in Github.

I hope this will be helpful for you to understand different use cases and choose the best one that fits your application need.