Angular 9 Web Worker IE不兼容问题求全浏览器适配方案

核心问题说明 #

IE 浏览器完全不支持type: 'module'类型的Web Worker，而Angular9默认的Web Worker打包规则仅生成适配ES Module的产物，因此直接移除type配置会因为找不到非ES Module版本的worker资源抛出404错误。

具体调整步骤 #

• 第一步：修改angular.json配置，添加Web Worker的传统模式打包规则
  找到项目对应angular.json中的architect > build > options节点，新增如下配置：

  "webWorkerTsConfig": "tsconfig.worker.json"
  

  然后在项目根目录新建tsconfig.worker.json，指定编译为ES5兼容格式，内容如下：

  {
    "extends": "./tsconfig.json",
    "compilerOptions": {
      "target": "es5",
      "module": "esnext",
      "lib": ["webworker", "es2018"]
    },
    "include": [
      "src/**/*.worker.ts"
    ]
  }
  

• 第二步：修改Worker实例化逻辑，做兼容性判断
  优先判断浏览器是否支持Module类型Worker，不支持则回退到传统模式，代码示例如下：

  public myWorker: Worker;
  
  constructor() {
    if (Worker.length > 1) { // 支持Worker第二个参数的浏览器才可能支持module类型
      try {
        this.myWorker = new Worker('./{path}/my.worker', { type: 'module' });
      } catch (e) {
        // 捕获不支持module类型的错误，回退到传统模式，引用打包后的传统worker文件路径即可
        this.myWorker = new Worker('assets/workers/my.worker.js');
      }
    } else {
      // IE等老旧浏览器直接使用传统模式
      this.myWorker = new Worker('assets/workers/my.worker.js');
    }
  }
  

• 第三步：配置额外的worker打包输出，把传统模式的worker文件打包到assets目录
  安装worker-loader依赖后，在angular.json的architect > build > options > assets节点添加对应规则，或者自定义webpack配置把所有.worker.ts文件编译为ES5格式输出到assets/workers目录下，确保回退时能正常访问到对应资源。
• 第四步：调整Worker内部代码，移除所有ES Module的import/export语法，改用importScripts加载依赖，兼容ES5运行环境。

注意事项 #

• 如果需要兼容IE11，要确保Worker内部没有用到IE不支持的语法API，必要时可以引入对应polyfill。
• Angular9自带的Web Worker支持默认只处理module模式，所以传统模式的worker文件必须单独配置打包规则，避免出现404错误。

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