Angular项目执行ng test报错求助：无法解析'fs'等模块

我之前也碰到过一模一样的坑！Angular项目跑起来、编译都没问题，一执行ng test就炸，尤其是这种提示找不到fs模块的错误，核心原因其实是：Karma测试运行在浏览器环境中，而fs是Node.js专属的核心模块，浏览器本身根本没有这个模块；那些依赖包（比如webdriver-js-extender、tough-cookie）可能在代码里引入了fs，但没做浏览器环境的兼容处理。

下面是几个亲测有效的解决方法，按优先级尝试：

方法1：给Karma配置添加Node模块polyfill #

这是最常用的解决方案，直接告诉Webpack如何处理这些Node核心模块：

1. 打开项目根目录的karma.conf.js文件
2. 在config.set()方法里，找到或添加webpack配置项，补充resolve.fallback规则：

webpack: {
  resolve: {
    fallback: {
      "fs": false, // 告诉Webpack不要解析fs模块（浏览器环境用不上）
      "path": require.resolve("path-browserify"),
      "os": require.resolve("os-browserify/browser")
    }
  }
}

3. 安装对应的polyfill包：

npm install path-browserify os-browserify --save-dev

4. 重新运行ng test，大概率能解决问题。

方法2：调整Angular测试配置 #

如果方法1没生效，可以试试在Angular的全局配置里做兼容：

1. 打开angular.json，找到test配置下的options -> scripts，添加polyfill脚本路径：

"scripts": [
  "./node_modules/path-browserify/index.js",
  "./node_modules/os-browserify/browser.js"
]

2. 同时修改tsconfig.spec.json的compilerOptions，添加路径映射：

"compilerOptions": {
  "paths": {
    "fs": ["node_modules/fs"],
    "path": ["node_modules/path-browserify"],
    "os": ["node_modules/os-browserify/browser"]
  }
}

方法3：更新或修复有问题的依赖 #

有时候是依赖包版本太旧，没做浏览器兼容：

• 尝试更新出问题的依赖到最新版：

npm update webdriver-js-extender tough-cookie --save-dev

• 如果更新后还是不行，可以用patch-package给这些包打补丁，手动去掉不必要的fs引入代码。

额外小提示 #

如果你的项目是Angular 12+，可以试试在angular.json的test配置里启用browserTarget，让测试环境和生产环境的构建配置保持一致：

"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "browserTarget": "你的项目名称:build"
  }
}

我当时就是用方法1搞定的，你可以先从这个开始试，大部分情况都能解决~

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