如何在Angular v18中适配Node.js核心模块？

问题说明 #

在Angular v18应用中使用依赖readable-stream的microphone-stream时，本地运行控制台出现globals、Buffer和process（均为Node.js核心模块）缺失的错误。尝试过安装process和buffer旧版本包并在polyfill中添加代码，但没有效果。另外，知道vite-plugin-node-polyfills插件可以实现模块填充，但不清楚如何在Angular的Vite配置中添加该插件，当前使用的是angular.json中标准的Angular应用构建器：

...
"architect": {
    "build": {
        "builder": "@angular-devkit/build-angular:application",
...

解决方案 #

方法一：通过Angular扩展Vite配置使用node-polyfills插件 #

Angular v18的官方构建器支持通过配置扩展Vite设置，步骤如下：

1. 安装插件

npm install vite-plugin-node-polyfills --save-dev

2. 修改angular.json
   在build和serve的配置选项中添加viteConfig字段，指向自定义的Vite配置文件：

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:application",
    "options": {
      // 保留原有其他配置
      "viteConfig": "vite.config.ts"
    }
  },
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "viteConfig": "vite.config.ts"
    }
  }
}

3. 创建vite.config.ts文件
   在项目根目录新建该文件，配置插件：

import { defineConfig } from 'vite';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

export default defineConfig({
  plugins: [
    nodePolyfills({
      // 按需指定需要填充的模块，默认已包含常用的process、buffer等
      include: ['process', 'buffer', 'globals'],
      globals: {
        global: true, // 将window映射为global对象
      },
      process: true,
      buffer: true
    })
  ]
});

方法二：手动优化Polyfill配置 #

如果不想用插件，可更新Polyfill方式确保全局对象正确注入：

1. 安装最新版依赖

npm install process buffer --save

2. 配置src/polyfills.ts
   如果项目中没有这个文件就新建，添加以下代码：

// 把window设为全局global对象
(window as any).global = window;

// 注入process
import process from 'process';
(window as any).process = process;

// 注入Buffer
import { Buffer } from 'buffer';
(window as any).Buffer = Buffer;

3. 确保polyfills被Angular加载
   在angular.json的build配置中确认polyfills路径已配置：

"build": {
  "options": {
    // 其他原有配置
    "polyfills": ["src/polyfills.ts"]
  }
}

额外调整：模块解析配置 #

如果还有模块找不到的情况，可在vite.config.ts中添加别名配置：

export default defineConfig({
  resolve: {
    alias: {
      'process': 'process/browser',
      'buffer': 'buffer'
    }
  },
  plugins: [nodePolyfills()]
});

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