Angular13+Webpack5升级后ng serve加载Worker文件运行时报错求助

问题核心 #

升级后改用Webpack 5原生Worker语法，ng build成功但ng serve触发跨域错误，本质是开发模式下Worker资源的路径解析或资源复制配置错误，导致浏览器无法从http://localhost:4200正确加载Worker脚本。

解决步骤 #

• 修正Worker路径写法
  确保使用相对当前文件的路径（添加./前缀），避免路径解析为绝对URL：

  const testworker = new Worker(new URL('./test.worker.bundle.js', import.meta.url));
  

• 调整Webpack开发环境配置
  若使用自定义Webpack配置（如@angular-builders/custom-webpack），需设置开发环境的publicPath为根路径：

  module.exports = {
    output: {
      publicPath: '/',
      filename: '[name].js'
    }
  };
  

  同时移除原worker-loader相关配置，避免与Webpack 5原生Worker处理逻辑冲突。

• 配置Angular开发服务器
  在angular.json的serve选项中，确保publicPath正确，并允许本地主机访问：

  "architect": {
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "publicPath": "/",
        "allowedHosts": ["localhost"]
      }
    }
  }
  

• 确保Worker文件被复制到开发服务器目录
  在angular.json的assets数组中添加Worker文件路径，保证ng serve时资源被正确复制：

  "assets": [
    "src/favicon.ico",
    "src/assets",
    "src/test.worker.bundle.js" // 根据实际文件位置调整路径
  ]
  

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