Angular 8 升级至 Angular 11 时报 Can't resolve 'util'/'zlib' 错误求解

Angular 11 版本的 CLI 构建管线默认移除了对 Node.js 内置核心模块（如 util、zlib、path、stream 等）的自动浏览器端 polyfill 注入。项目里报错的所有第三方包（snapdragon、sshpk、request、tough-cookie 等）都是面向 Node.js 环境开发的工具类库，依赖这些内置模块，在浏览器端构建时自然会触发模块解析失败报错。
现有 package.json 里虽然手动添加了 util 依赖，但未配置 webpack 对这些模块的浏览器端解析规则，单安装包无法解决问题。 #

• 安装核心适配依赖
  先安装构建所需的 polyfill 包、自定义 webpack 规则的适配工具，全部执行带 --legacy-peer-deps 的安装命令，避免 peer 依赖冲突：

  npm install --save-dev @angular-builders/custom-webpack@11 \
    util zlib browserify-zlib stream-browserify assert url os-browserify path-browserify \
    process buffer --legacy-peer-deps
  

• 配置自定义 webpack 解析规则
  在项目根目录新建 webpack.config.custom.js 文件，写入如下配置，完成 Node 核心模块的浏览器端映射：

  const webpack = require('webpack');
  module.exports = {
    resolve: {
      fallback: {
        "util": require.resolve("util/"),
        "zlib": require.resolve("browserify-zlib"),
        "stream": require.resolve("stream-browserify"),
        "assert": require.resolve("assert/"),
        "url": require.resolve("url/"),
        "os": require.resolve("os-browserify/browser"),
        "path": require.resolve("path-browserify")
      }
    },
    plugins: [
      new webpack.ProvidePlugin({
        process: 'process/browser',
        Buffer: ['buffer', 'buffer']
      })
    ]
  }
  

• 挂载自定义配置到 Angular 构建管线
  打开 angular.json 文件，完成两处替换：
  1. 找到项目 architect.build 节点下的 builder 字段，将原有值 @angular-devkit/build-angular:browser 替换为 @angular-builders/custom-webpack:browser，并在同层级的 options 节点下添加自定义配置路径：

     "options": {
       "customWebpackConfig": {
         "path": "./webpack.config.custom.js"
       }
     }
     

  2. 找到项目 architect.serve 节点下的 builder 字段，将原有值 @angular-devkit/build-angular:dev-server 替换为 @angular-builders/custom-webpack:dev-server，同样在 options 节点下添加相同的 customWebpackConfig 配置，保证本地启动服务时也加载规则。
• 清理 package.json 的版本冲突残留
  删除 devDependencies 里残留的 Angular 8 版本的 @angular/compiler-cli": "^8.2.3 配置，保留和主依赖一致的 11 版本即可，避免多版本编译器冲突。
• 清理缓存重新启动
  删除本地 node_modules 文件夹和 package-lock.json，重新执行带 --legacy-peer-deps 的依赖安装命令，再运行 ng serve 即可正常启动。

注意：把 Node 核心模块 polyfill 引入前端包会增加约 30-50KB 的打包体积，适合临时解决升级阶段的报错，不要作为长期架构方案。
项目里引入的 grpc、request、@google-cloud/storage 这类纯 Node 端 SDK 本身不支持浏览器运行，后续可以检查业务代码的引入路径，将这类服务端逻辑迁移到独立的后端接口层，从根源上避免浏览器端构建时的 Node 模块缺失问题，同时也能减小前端打包体积。

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