Angular 17新构建器执行ng build时Node内置模块解析失败

问题根源 #

Angular 17 默认的新应用构建器（@angular-devkit/build-angular:application）采用 esbuild 替代了旧版的 webpack，esbuild 对 Node.js 内置模块（如 path、fs、url、child_process）的处理逻辑更严格：

• 不会自动忽略浏览器环境中不需要的 Node 端模块
• 项目依赖中的 jsdom、http-proxy-agent 属于 Node.js 专属库，被误纳入浏览器打包范围
• 此前在 package.json 中添加 browser 字段无效，因为 esbuild 不识别该配置项

解决方案 #

1. 标记 Node 内置模块为外部依赖 #

在 angular.json 的构建配置中，将这些 Node 内置模块标记为外部依赖，阻止 esbuild 尝试打包它们：
修改 projects.angular-new-app.architect.build.options，添加：

"externalDependencies": ["path", "fs", "url", "child_process"]

完整配置片段：

"build": {
  "builder": "@angular-devkit/build-angular:application",
  "options": {
    "allowedCommonJsDependencies": ["fabric", "jspdf-autotable"],
    "externalDependencies": ["path", "fs", "url", "child_process"],
    // 其他原有配置...
  }
}

2. 清理浏览器代码中的 Node 端库引用 #

检查项目代码及依赖：

• 确认 jsdom、http-proxy-agent 仅在测试环境（如 Jest 配置）中使用，不要包含在主应用代码（src/main.ts 入口的依赖链）中
• 若第三方依赖间接引入了这些 Node 模块，尝试替换为浏览器兼容的替代库，或在 allowedCommonJsDependencies 中添加对应依赖库，配合外部依赖配置使用

3. 用别名映射空模块（备选方案） #

如果外部依赖配置无效，可通过 esbuild 别名将 Node 内置模块映射为空模块：

1. 在 src 目录创建 empty-module.js，内容为：

module.exports = {};

2. 在 angular.json 的构建配置中添加 esbuild 自定义配置：

"build": {
  "builder": "@angular-devkit/build-angular:application",
  "options": {
    // 其他原有配置...
    "esbuildOptions": {
      "alias": {
        "path": "./src/empty-module.js",
        "fs": "./src/empty-module.js",
        "url": "./src/empty-module.js",
        "child_process": "./src/empty-module.js"
      }
    }
  }
}

4. 临时降级回旧构建器 #

若上述方案都无法解决问题，可暂时换回旧版 webpack 构建器：
修改 angular.json 中构建器的配置：

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  // 其他原有配置保持不变
}

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