Angular v13升级v14报错Cannot find module '@angular/cdk/dialog'

问题场景 #

执行以下命令将Angular项目从v13升级到v14：

ng update @angular/core@14 @angular/cli@14
ng update @angular/material@14

升级完成后项目启动报错，核心错误信息如下：

./node_modules/@angular/material/fesm2015/dialog.mjs:1:0-93 - Error: Module not found: Error: Package path ./dialog is not exported from package D:\projectName\node_modules\@angular\cdk (see exports field in D:\projectName\node_modules\@angular\cdk\package.json)

Error: node_modules/@angular/material/dialog/index.d.ts:3:36 - error TS2307: Cannot find module '@angular/cdk/dialog' or its corresponding type declarations.
3 import { CdkDialogContainer } from '@angular/cdk/dialog';

查看package.json依赖配置，@angular/cdk、@angular/material等核心包均标注为^14.0.1，表面看版本一致。

根本原因 #

本地实际安装的@angular/cdk版本低于14.0.0，和14版本的@angular/material不兼容。
Angular Material 14.x对Dialog模块做了重构，底层依赖@angular/cdk 14.0.0才新增的@angular/cdk/dialog入口。package.json里的^14.0.1是语义化版本范围，不代表node_modules里实际安装的就是对应版本：升级过程中锁文件未更新、npm缓存异常、升级流程中途中断、依赖版本冲突等原因，都会导致本地残留13.x版本的@angular/cdk，旧版本cdk没有导出dialog路径，就会触发上述报错。

修复步骤 #

按顺序执行以下操作：

• 清理旧依赖和缓存

# 删除本地依赖文件夹
rm -rf node_modules
# 删除对应包管理工具的锁文件，npm对应package-lock.json，yarn对应yarn.lock，pnpm对应pnpm-lock.yaml
# npm用户执行
rm package-lock.json
# 清除包缓存
npm cache clean --force

• 精确安装匹配版本的@angular/cdk，避免语义化版本拉取到不兼容包

# npm用户执行
npm install @angular/cdk@14.0.1 --save-exact
npm install

# yarn用户执行对应命令
# yarn add @angular/cdk@14.0.1 --exact
# yarn install

• 校验安装版本
  执行命令查看本地实际安装的cdk版本：

npm ls @angular/cdk

确认输出的版本号为14.0.1，无invalid、版本冲突类提示即可。

• 重新启动项目

ng serve

补充：如果上述操作完成后仍报错，检查项目是否自定义了webpack配置、是否引入了第三方组件库强制依赖低版本@angular/cdk，将对应依赖升级到兼容Angular14的版本即可。

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