Angular中Web Worker运行失效 提示请求资源未找到问题求助

解决方案 #

核心问题原因 #

Angular 13及以后默认使用ES模块构建，直接写相对字符串路径无法被打包工具正确识别worker文件位置，导致编译后请求404。

修复步骤 #

• 修正Worker实例化写法
  替换原有new Worker的字符串路径写法，使用new URL配合import.meta.url指定路径，代码示例：

ngOnInit() {
  if (typeof Worker !== 'undefined') {
    const worker = new Worker(new URL('./mapa-worker.worker.ts', import.meta.url), { type: "module" });
    worker.onmessage = ({ data }) => {
      console.log(`page got message: ${data}`);
    };
    worker.postMessage('hello');
  } else {
    // 不支持Web Worker的降级逻辑
  }
}

• 检查worker配置文件
  如果是手动创建的.worker.ts文件，未使用Angular CLI的ng generate worker命令生成，需要补全以下配置：
  1. 项目根目录新增tsconfig.worker.json，内容如下：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/worker",
    "lib": ["es2018", "webworker"],
    "types": []
  },
  "include": ["src/**/*.worker.ts"]
}

2. 打开angular.json，找到对应项目的architect > build > options节点，添加配置：

"webWorkerTsConfig": "tsconfig.worker.json"

• 确认文件路径
  确保mapa-worker.worker.ts文件的存放路径和new URL中写的相对路径匹配，路径相对于当前调用Worker的组件ts文件。

注意事项 #

不要在worker文件中导入@angular/core等Angular框架相关依赖，worker运行环境无浏览器DOM和Angular上下文，导入相关依赖会导致运行报错。

内容的提问来源于stack exchange，提问作者souzatorquato