How can Web worker send back calculated data to component

Question

I have to perform calculations on JSON data. I want to do it from Web worker. I have GetMap method in dashboard.component(startup component).

My project takes 8 to 9 seconds to load so I planned to use web worker for few tasks. I tried but that is not working. Out of web worker I am expecting the manipulated data should come to GetMap in result.

GetMap method in dashboard.component

public GetMap()
{
  this.mapChart = am4core.create("RCMap", am4maps.MapChart);
  this.mapChart.geodata = am4geodata_worldLow;
  this.mapChart .projection = new am4maps.projections.Miller();
  this.polygonSeries = this.mapChart .series.push(new am4maps.MapPolygonSeries());
  this.polygonSeries.useGeodata = true;
  let imageSeries = this.mapChart .series.push(new am4maps.MapImageSeries());
  place.propertyFields.latitude = "lat";
  place.propertyFields.longitude = "long";
  var result=List_f as any[]
  

  if (typeof Worker !== 'undefined') {
   // Create a new
   const worker = new Worker('./web-worker.worker', { type: 'module' });
   worker.onmessage = ({ result }) => {
    console.log(`page got message: ${result}`);
  };
     worker.postMessage('hello');
  } else {

   // Web Workers are not supported in this environment.
   // You should add a fallback so that your program still executes correctly.
  }

    imageSeries.data=result;
  })

}

This is my web-worker

addEventListener('message', ({ data }) => {
  
  let sortedLocations= data.sort(function(a, b){
       if(a.loc < b.loc) { return -1; }
       if(a.loc > b.loc) { return 1; }
       return 0;
    })
  postMessage(sortedLocations);
});

Getting these errors

ERROR in ./src/app/dashboard/dashboard.component.ts
Module not found: Error: Can't resolve './web-worker.worker' in 'D:\Myproject/Directions\src\app\dashboard'
resolve './web-worker.worker' in 'D:\Myproject/Directions\src\app\dashboard'
  using description file: D:\Myproject/Directions\package.json (relative path: ./src/app/dashboard)    Field 'browser' doesn't contain a valid alias configuration
    using description file: D:\Myproject/Directions\package.json (relative path: ./src/app/dashboard/web-worker.worker)
  no extension
    Field 'browser' doesn't contain a valid alias configuration
    D:\Myproject/Directions\src\app\dashboard\web-worker.worker doesn't exist
  .ts
    Field 'browser' doesn't contain a valid alias configuration
    D:\Myproject/Directions\src\app\dashboard\web-worker.worker.ts doesn't exist
  .tsx
    Field 'browser' doesn't contain a valid alias configuration
    D:\\Myproject/Directions\src\app\dashboard\web-worker.worker.tsx doesn't exist
  .mjs
    Field 'browser' doesn't contain a valid alias configuration
    D:\Myproject/Directions\src\app\dashboard\web-worker.worker.mjs doesn't exist

Edit: I am not using JQuery or ajax. I am using Web worker for angular.

Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Kaiido, Oct 06 '20 at 06:46

score -1 · Answer 1 · answered Oct 06 '20 at 07:13

-1

It look like you have not configured workers properly.

Angular uses webpack, so make sure to follow their guide for adding worker into your app.

answered Oct 06 '20 at 07:13

T.Chmelevskij

1,904
17
30

How can Web worker send back calculated data to component

1 Answers1