Angular 17执行ng test时报node:fs等模块未被插件处理错误

问题场景 #

Angular 17项目运行ng serve和ng build完全正常，但执行ng test（基于Karma）时，抛出以下错误：

node:fs/promises - Error: Module build failed: UnhandledSchemeError: Reading from "node:fs/promises" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

node:fs - Error: Module build failed: UnhandledSchemeError: Reading from "node:fs" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

node:path - Error: Module build failed: UnhandledSchemeError: Reading from "node:path" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

node:url - Error: Module build failed: UnhandledSchemeError: Reading from "node:url" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

已尝试以下方案但无效：

• 移除代码中的node:前缀：代码库无此类引用，仅依赖包存在无法修改
• 手动创建并修改webpack.conf.js：Angular 17默认无该文件，修改后应用崩溃
• 检查Webpack版本：仅存在5.9.4版本，无版本冲突

解决方案 #

方案1：使用自定义Webpack构建器扩展测试配置 #

1. 安装自定义Webpack构建依赖

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

2. 在项目根目录创建webpack.test.config.js，添加如下配置：

module.exports = {
  resolve: {
    // 处理node:协议的模块映射
    schemes: {
      'node:': 'scheme',
    },
    alias: {
      'node:fs/promises': 'fs/promises',
      'node:fs': 'fs',
      'node:path': 'path',
      'node:url': 'url'
    }
  }
};

3. 修改angular.json中的测试构建配置
   找到projects -> [你的项目名称] -> architect -> test，替换构建器并指定自定义Webpack配置：

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

方案2：在测试入口文件中模拟Node.js模块 #

如果方案1无效，可在src/test.ts中添加模块模拟代码，让浏览器测试环境兼容Node.js核心模块：

// 全局对象模拟
(window as any).global = window;

// 提前引入测试环境初始化代码
import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

// 模拟node:前缀的模块映射
import * as fs from 'fs';
import * as fsPromises from 'fs/promises';
import * as path from 'path';
import * as url from 'url';

(window as any)['node:fs'] = fs;
(window as any)['node:fs/promises'] = fsPromises;
(window as any)['node:path'] = path;
(window as any)['node:url'] = url;

// 初始化测试环境
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(),
);

// 加载所有测试文件（保留原有代码）
const context = require.context('./', true, /\.spec\.ts$/);
context.keys().map(context);

方案3：修改TypeScript测试配置映射路径 #

在tsconfig.spec.json的compilerOptions中添加路径映射，让TypeScript解析node:前缀的模块到对应包：

"compilerOptions": {
  // 原有配置...
  "paths": {
    "node:fs/promises": ["node_modules/fs/promises"],
    "node:fs": ["node_modules/fs"],
    "node:path": ["node_modules/path"],
    "node:url": ["node_modules/url"]
  }
}

说明 #

这类问题本质是测试环境（Karma浏览器环境）无法识别Node.js的node:协议模块引用，而开发/生产构建时Angular CLI的Webpack配置已默认处理了这类情况。通过扩展Webpack配置、模拟模块或TypeScript路径映射，可解决测试环节的协议解析问题。

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