Angular 5执行ng test报错：无法解析child_process、fs模块

我帮你梳理下这个问题的解决思路，你遇到的模块解析错误本质是：Angular 5的单元测试环境（Karma+浏览器）试图加载Node.js核心模块（child_process、fs等），但这些模块本来就不能在浏览器环境运行，而你之前在package.json的browser字段设置忽略这些模块，因为Angular CLI内置的Webpack配置并没有读取这个字段，所以没生效。下面是具体的修复步骤：

步骤1：用自定义Webpack配置覆盖CLI默认配置 #

Angular 5的CLI没有暴露根目录的Webpack配置，所以需要借助@angular-builders/custom-webpack来扩展配置：

• 先安装适配Angular 5的版本依赖：

  npm install --save-dev @angular-builders/custom-webpack@7
  

• 在项目根目录创建webpack.test.config.js文件，添加以下配置来忽略Node核心模块：

  module.exports = {
    node: {
      child_process: 'empty',
      fs: 'empty',
      net: 'empty',
      tls: 'empty'
    }
  };
  

• 修改.angular-cli.json（Angular 5的CLI配置文件）中的test部分，替换默认构建器并指定自定义Webpack配置：
  找到文件里的"test"节点，修改为：

  "test": {
    "builder": "@angular-builders/custom-webpack:karma",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.test.config.js"
      },
      "main": "./src/test.ts",
      "polyfills": "./src/polyfills.ts",
      "tsConfig": "./src/tsconfig.spec.json",
      "karmaConfig": "./karma.conf.js",
      "styles": [
        "./src/styles.css"
      ],
      "scripts": [],
      "assets": [
        "./src/favicon.ico",
        "./src/assets"
      ]
    }
  }
  

步骤2：检查并配置Karma浏览器环境 #

单元测试需要Chrome浏览器支持，确保相关依赖和配置正确：

• 如果还没安装Chrome启动器，执行：

  npm install --save-dev karma-chrome-launcher
  

• 打开karma.conf.js，确认browsers配置项为['Chrome']，确保测试用Chrome运行：

  module.exports = function(config) {
    config.set({
      // ...其他配置
      browsers: ['Chrome'],
      // ...其他配置
    });
  };
  

步骤3：清理依赖缓存并重新安装 #

有时候依赖缓存会导致奇怪的问题，执行以下操作：

• 删除node_modules和锁文件：

  # Linux/Mac
  rm -rf node_modules package-lock.json
  # Windows
  rmdir /s/q node_modules && del package-lock.json
  

• 重新安装依赖：

  npm install
  

步骤4：检查冗余依赖（可选） #

你提到的selenium-webdriver是用于端到端（e2e）测试的依赖，单元测试（ng test）一般不需要它。如果你的项目没用到e2e测试，可以卸载它来避免不必要的模块引入：

npm uninstall selenium-webdriver

完成以上步骤后，再运行ng test --port 4200应该就能解决模块解析的问题了。

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