Angular 17添加路由后出现fs外部化及process未定义错误求助

问题根源 #

你遇到的错误核心是：客户端代码中意外引入了服务端框架express。express是Node.js专属的服务端工具，依赖fs（文件系统）、process（进程）等仅Node.js环境才有的API，浏览器完全不支持这些模块，所以Vite打包后在浏览器中触发兼容性报错。

解决步骤 #

1. 排查并删除客户端代码中的express导入

全局搜索项目内的import express或require('express')，找到所有在组件、HttpClient服务、共享模块等客户端代码中的express引用，直接删除这些导入语句。

• 重点检查你添加路由的组件、注入的HttpClient服务文件，大概率是这些地方不小心引入了express相关代码。

2. 修正依赖安装位置

确保express仅作为开发/服务端依赖，不会被客户端打包：

# 先移除生产依赖中的express
npm uninstall express --save
# 重新安装为开发依赖
npm install express --save-dev

3. 清理缓存与重建项目

清理构建缓存和依赖，避免残留问题：

# 删除依赖和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 清理构建缓存并重新构建
npm run build -- --clean

4. SSR场景额外排查（如果启用了Angular SSR）

如果你的项目用了Angular 17的SSR功能：

• 确保server.ts中的express配置完全隔离在服务端代码里，不要在客户端组件/服务中引用任何服务端逻辑。
• 检查angular.json的构建配置，确认客户端构建输出路径（architect.build.options.outputPath）和服务端构建路径（architect.server.options.outputPath）完全分开，避免服务端代码混入客户端包。

5. 强制Vite外部化服务端模块（兜底方案）

如果以上步骤无效，在项目根目录创建vite.config.ts，强制Vite跳过服务端模块的打包：

import { defineConfig } from 'vite';
import angular from '@angular-devkit/build-angular/src/builders/vite/angular';

export default defineConfig({
  plugins: [angular()],
  optimizeDeps: {
    exclude: ['express', 'fs', 'process']
  },
  ssr: {
    external: ['express', 'fs', 'process']
  }
});

验证 #

运行npm start启动项目，查看浏览器控制台是否还存在报错；如果是SSR项目，执行npm run serve:ssr再验证。

内容的提问来源于stack exchange，提问作者Mohamed El-Zohary