Angular 13项目中strip-ansi用require引发ES模块异常的解决办法

问题根源 #

你遇到的问题是两个因素叠加导致的：

1. package.json里设置了"type": "module"，但Angular 13的CLI工具链还基于CommonJS模块系统，这个设置会让Node.js强制按ES模块规则解析所有.js文件，导致原本用CommonJS编写的依赖（比如strip-ansi）无法正常使用require()。
2. 你在overrides里把ansi-regex指定为6.0.1版本，这个版本是纯ES模块，和strip-ansi的CommonJS写法不兼容，触发了加载冲突。

解决步骤 #

1. 修改package.json配置

   • 删除"type": "module"这一行（Angular 13不支持项目设为ES模块）
   • 将overrides里的ansi-regex版本改为"5.0.1"（这个版本是CommonJS格式，和strip-ansi兼容）
     修改后的overrides部分应该是：

   "overrides": {
     "postcss": "8.2.13",
     "ansi-regex": "5.0.1",
     "node-forge": "1.3.1",
     "qs" : "6.10.3",
     "@angular/core" : "^13.1.2"
   }
   

2. 清理依赖并重新安装

   • 执行命令删除node_modules和锁文件：

     # Windows系统
     rmdir /s /q node_modules
     del package-lock.json
     
     # macOS/Linux系统
     rm -rf node_modules
     rm package-lock.json
     

   • 重新安装依赖：

     npm install
     

3. 重新启动服务

   npm start
   

这样就能解决模块加载的冲突问题，让Angular服务正常启动。

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