javascript - 使用 Angular 7+ 找不到 Web Worker 脚本的 URL

Question

我正在测试 Web Workers 并将它们与 Angular 7+ 结合

这是我的 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>

这是我的 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 );
  }
}

这是我的 Webworker 定义 app.component.worker.js

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

所有文件都在同一层。

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

当本地服务器运行时，出现这个信息

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

我尝试设置为相对路径

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

还是不行

我的代码有什么问题？是否存在使用 Typescript 完成所有操作的最佳方法？

Answer 1

这段代码我也遇到了同样的问题

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

改为

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

在此之后我没有遇到网络 worker 的这个问题。

I am using this code on Angular 8.