The URL to Web Worker script is not found with Angular 7+

Question

I´m testing Web Workers and combining them with Angular 7+

This is my app.component.html

<div>
  <input type="text" name="lat" placeholder="Latitude" #lat (input)="updateMap( lat )">
  <input type="text" name="lng" placeholder="Longitude" #lng (input)="updateMap( lng )">
</div>

This is my app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'mapa';
  coords: any = {lat: 0, lng: 0};
  worker: Worker;

  ngOnInit() {
      this.worker = new Worker( './app.component.worker.js' );
  }

  updateMap( selector: any ) {
    const key   = selector.getAttribute('name');
    const value = Number(selector.value);
    this.coords[ key ] = value;

    this.worker.postMessage( this.coords );
  }
}

This is my Webworker definition app.component.worker.js

onmessage = ( e ) => {
    console.log( e );
};

All the files are at the same level.

project
 -e2e
 -node_modules
 -src
   -app
     -app-routing.module.ts
     -app.component.css
     -app.component.html
     -app.component.ts
     -app.component.worker.js
   -lot of files
 -lot of files

When the local server runs, appears this message

GET http://localhost:4200/app.component.worker.js 404 (Not Found)

I tried to set as relative path

'./src/app/app.component.worker.js'

But stills not working

What is wrong with my code? Does exists a best way to do all with Typescript?

Exactly the same problem, I even include the script path in angular.json script but still do not work.. Have you got any updates? — Tethys Zhang
– Tethys Zhang, Commented Oct 23, 2019 at 6:24

Tethys Zhang · Accepted Answer · 2020-03-21 17:41:26Z

7

Do not forget to run: ng generate web-worker And then restart the angular serve , if not ,it will not compile your worker file into webpack.

answered Mar 21, 2020 at 17:41

Tethys Zhang

5045 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Niels Kersic Over a year ago

This did it for me. Followed the Angular docs instructions, but did not think to restart ng serve to fix the errors. Thanks!

Puneet Sharma · Accepted Answer · 2019-11-06 17:13:53Z

5

I was also facing same issue with this code

const worker = new Worker('./web-worker/messenger.worker');

Change to

const worker = new Worker('./web-worker/messenger.worker', { type: `module` });

After this I am not getting this issue with web worker.

I am using this code on Angular 8.

answered Nov 6, 2019 at 17:13

Puneet Sharma

3053 silver badges14 bronze badges

2 Comments

Puneet Sharma Over a year ago

If this answer helpfull Please rate up. Thank you

C.M. Over a year ago

For me this introduced all sorts of type conflicts. One way I've gotten a worker running under Angular quickly is serving the worker as a .js file from the assets folder.

João Rangel · Accepted Answer · 2019-12-18 19:54:00Z

2

For me it just worked by putting the path src/app/web-worker/messenger.worker.

Then try the following:

const worker = new Worker('src/app/web-worker/messenger.worker', { type: `module` });

answered Dec 18, 2019 at 19:54

João Rangel

211 bronze badge

1 Comment

Hassan Arafat Over a year ago

+1 but why have you mentioned like { type: module } you can simply write { type: 'module' }. Tilde isnt required

Collectives™ on Stack Overflow

The URL to Web Worker script is not found with Angular 7+

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related