Angular未处理异常：ES模块不支持目录导入问题求助

错误详情 #

发生未处理异常：从node_modules@angular-devkit\architect\node\node-modules-architect-host.js导入ES模块时，不支持目录导入'\node_modules@angular-devkit\build-angular\src\dev-server'
您是否想要导入/node_modules/@angular-devkit/build-angular/src/dev-server/index.js？[ng] 如需更多详细信息，请查看"C:\Users\DELL\AppData\Local\Temp\ng-vVgkqZ\angular-errors.log"。[ERROR] ng已意外关闭（退出代码127）。

解决步骤 #

1. 校验Node.js与Angular版本兼容性 #

目录导入异常常因Node.js版本和Angular CLI不匹配导致，先确认版本对应关系：

• 查看当前项目Angular CLI版本：ng version
• 安装与项目Angular版本匹配的Node.js（推荐用nvm管理多版本Node.js）

2. 更新Angular核心开发依赖 #

执行命令更新CLI和构建工具版本，修复包兼容问题：

npm install @angular/cli@latest @angular-devkit/build-angular@latest --save-dev

若使用yarn：

yarn add @angular/cli@latest @angular-devkit/build-angular@latest --dev

3. 清理缓存并重装依赖 #

• 删除旧依赖文件：

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

• 重新安装依赖：

  npm install # 或 yarn install
  

4. 排查package.json模块类型冲突 #

若package.json中存在"type": "module"字段，会导致CommonJS与ES模块冲突，尝试移除该字段后重启项目。

5. 降级到稳定兼容版本 #

若更新后问题仍存在，可尝试降级到项目适配的稳定版本，示例：

npm install @angular/cli@16 @angular-devkit/build-angular@16 --save-dev

（版本号可根据项目实际情况调整）

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