Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Web worker in Angular CLI

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

like image 267
Dipak Telangre Avatar asked Feb 08 '18 17:02

Dipak Telangre


2 Answers

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 );
 }
like image 179
Alan Smith Avatar answered Oct 19 '22 15:10

Alan Smith


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.

like image 22
Suresh Patidar Avatar answered Oct 19 '22 16:10

Suresh Patidar