Angular+Module Federation环境下Web Worker出现importScripts不支持报错

场景描述 #

我正在使用Angular搭配ngx-build-plus和Webpack Module Federation，通过以下代码创建Web Worker：

const worker = new Worker(new URL('./model.worker.ts', import.meta.url));

在该Worker中导入了解析器类，而该解析器类又依赖一个自定义Angular库。

问题现象 #

运行时出现两种错误：

Failed to execute 'importScripts' on 'WorkerGlobalScope':
Module scripts don't support importScripts()

或者

Uncaught Error: Cannot find module '210'

关键观察 #

• 移除自定义库的导入后，Worker可正常运行
• 保留库导入则Worker运行失败
• 代码在默认Angular构建下完全正常，但启用Module Federation后触发问题

疑问解答 #

1. 为何使用Webpack+Module Federation会出现该问题？ #

Module Federation的模块加载逻辑和默认Angular构建存在差异：它会尝试用importScripts()加载共享模块，但通过new URL()创建的Worker属于模块脚本模式，该模式下浏览器明确禁止使用importScripts()，这直接导致了第一个错误。

而"找不到模块'210'"这类错误，是因为Module Federation会将模块映射为数字ID，但Worker是独立的执行上下文，没有主应用的模块加载器来解析这些ID对应的实际模块，所以无法找到对应资源。

2. 共享库在Web Worker中是否不被支持？ #

并非完全不支持，但默认的Module Federation配置不会自动适配Worker环境的模块共享。Worker拥有独立的执行上下文，和主应用的模块加载器相互隔离，共享模块无法直接在Worker中被引用，必须针对Worker的构建流程做专门配置调整。

3. 该环境下在Worker中使用依赖的正确方式是什么？ #

以下是几种可行的解决方案：

方案一：将依赖直接打包进Worker Bundle

修改Webpack配置，让Worker的构建流程不依赖Module Federation的共享机制，而是把自定义库直接打包进Worker的chunk中。可以在ngx-build-plus的自定义Webpack配置中，针对Worker规则做调整：

module.exports = {
  module: {
    rules: [
      {
        test: /\.worker\.ts$/,
        use: [
          { loader: 'worker-loader', options: { esModule: true } },
          { loader: 'ts-loader' }
        ]
      }
    ]
  },
  plugins: [
    new ModuleFederationPlugin({
      // ...其他主应用配置
      shared: {
        // 排除Worker需要使用的自定义库，不让它参与共享
        'your-custom-library': { include: false }
      }
    })
  ]
};

方案二：在Worker中直接导入库的ESM版本

确保Worker以模块模式运行，在Worker文件中直接导入自定义库的完整路径，而非依赖Module Federation的共享模块：

// model.worker.ts
import { YourParserClass } from '../path/to/your-custom-library/src/lib';
// 后续正常使用解析器类

这种方式会让Angular构建时将库代码直接打包进Worker模块，绕开Module Federation的共享逻辑。

方案三：调整共享库的Eager模式（不推荐）

对于需要在Worker中使用的共享库，设置eager: true，让库被提前打包进主应用bundle，并通过全局变量暴露。之后在Worker中可以通过全局变量访问该库：

// Module Federation配置
shared: {
  'your-custom-library': { eager: true, singleton: true }
}

// model.worker.ts
const YourParser = (self as any).YourCustomLibrary;
// 使用解析器

此方案会增加主应用bundle体积，仅适合体积较小的库。

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