Angular 17中'process is not defined'及后续错误的解决方法求助

问题背景 #

实现Angular路由的canActivate守卫后，页面抛出Uncaught ReferenceError: process is not defined；尝试两种补全process的方案后，又触发新错误Uncaught TypeError: util.inherits is not a function。确认CanActivateFn逻辑本身正常，但未认证页面报错，经排查问题源于send包。

核心原因 #

send是Node.js后端专属的静态资源处理包，它依赖Node.js核心模块（process、util等），而Angular前端浏览器环境中不存在这些模块，直接引入会导致上述错误。

解决方案 #

方案1：移除/替换前端代码中的send依赖（推荐） #

检查你的authGuard或路由相关代码，排查是否误引入了send包（比如错误写了import * as send from 'send'），或者依赖的第三方包间接引入了send：

• 如果是用来做HTTP请求，直接替换为Angular官方的HttpClient
• 如果是处理静态资源加载，改用Angular内置的资源访问逻辑
• 可通过npm ls send命令查看项目依赖链，定位引入send的源头包，考虑替换为前端友好的替代包

方案2：补全Node.js核心模块polyfill（临时应急） #

如果必须保留send依赖，可通过polyfill补全浏览器缺失的Node.js模块：

1. 安装所需polyfill包：

npm install process util browserify-zlib

2. 在polyfill.ts文件中添加：

import * as process from 'process';
import * as util from 'util';
import 'browserify-zlib';

window['process'] = process;
window['util'] = util;

3. 修改angular.json的build配置，在options.scripts中添加：

"scripts": [
  "./node_modules/process/browser.js",
  "./node_modules/util/util.js"
]

注意：此方案会增加前端打包体积，仅作为临时修复，长期建议使用方案1。

代码排查提示 #

若能提供app.routes.ts和authGuard的具体代码，可更精准定位问题，但核心排查点：

• 守卫逻辑中是否直接引入Node.js专属模块
• 项目依赖包是否存在后端包被错误引入到前端的情况

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