Angular 15升级至16后出现DragAndDropModule解析错误求助

错误详情 #

编译./src/main.ts和./src/polyfills.ts时触发如下编译错误：

Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): Error: Cannot resolve type entity i29.DragAndDropModule to symbol

解决方案 #

核心修复：启用preserveSymlinks #

在项目根目录的angular.json中，找到对应项目的build配置节点，在options里添加"preserveSymlinks": true：

"architect": {
  "build": {
    "options": {
      // 保留原有配置
      "preserveSymlinks": true
    }
  }
}

该配置会让webpack解析模块时保留符号链接，避免依赖路径解析冲突，是解决此类问题的常用方案。

额外排查/修复步骤 #

• 清理并重装依赖：删除node_modules和package-lock.json后重新安装，避免缓存导致的版本不一致：

  rm -rf node_modules package-lock.json
  npm install
  

• 确认CDK版本匹配：确保@angular/cdk版本与Angular核心版本完全对齐（当前项目中CDK 16.0.3与Angular 16.0.4属于兼容版本，但需避免重复安装不同版本的CDK）
• 检查DragAndDropModule导入路径：确保模块是从官方CDK包正确导入：

  import { DragAndDropModule } from '@angular/cdk/drag-drop';
  

• 排查本地symlink依赖：如果项目使用了npm link引入本地开发包，确认symlink指向的模块版本与项目依赖版本一致，避免解析冲突

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