Angular项目引入socket.io-stream启动报Buffer未定义错误

Angular 12+版本默认使用Webpack 5构建，Webpack 5取消了Node.js核心模块在浏览器端的自动polyfill注入。Buffer是Node.js环境的内置全局对象，浏览器环境原生不存在，你仅安装buffer包但未做全局挂载和构建配置，无法解决问题。

• 确认buffer依赖已安装，已执行过npm i buffer可跳过这步：

  npm install buffer --save
  

• 打开src/polyfills.ts，在文件最顶部添加代码，将Buffer挂载到浏览器全局作用域：

  import { Buffer } from 'buffer';
  (window as any).global = window;
  (window as any).Buffer = Buffer;
  

• Angular 14及以上版本需要额外配置CommonJS依赖白名单：打开根目录angular.json，找到projects -> [你的项目名称] -> architect -> build -> options节点，添加如下配置：

  "allowedCommonJsDependencies": [
    "buffer",
    "socket.io-stream"
  ]
  

• 如果配置后出现TS类型报错，打开tsconfig.app.json，在compilerOptions中添加node类型支持：

  "compilerOptions": {
    "types": ["node"]
  }
  

• 所有配置修改完成后，必须完全终止当前运行的ng serve进程，重新执行启动命令，热更新不会加载polyfill相关的配置改动。

若后续启动时出现stream is not defined报错，执行npm i stream-browserify --save后，在polyfills.ts中补充import * as stream from 'stream-browserify'; (window as any).stream = stream;即可。

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