Angular 11升级12时出现@material-extended/mde依赖不兼容错误

算力阿峰

2026-10-12

Angular 11 升级 12 @material-extended/mde 依赖冲突解决方案

冲突核心：当前使用的 @material-extended/mde@^3.0.3 对等依赖要求 @angular/animations 版本为 ^8.0.0 || ^9.0.0-0，升级 Angular 后 @angular/animations 版本将升至 12.1.2，版本范围不匹配触发报错。

以下是可落地的解决方法：

方案1：临时跳过对等依赖校验
适合快速验证升级效果、确认功能是否正常的场景，不建议长期在生产环境使用。安装依赖时添加对应参数即可：
npm 用户执行：npm install --legacy-peer-deps
yarn 用户执行：yarn install --ignore-peer-deps
该操作不会修改任何依赖版本，仅强制忽略对等依赖校验，只要mde的功能在Angular12环境下无运行时错误即可正常使用。
方案2：替换停止维护的@material-extended/mde包（推荐长期方案）
@material-extended/mde早已停止更新，最高仅适配到Angular9，是本次冲突的根本原因。可以根据你用到的mde组件做替换：
若使用的是选择器、弹出框类通用组件：直接替换为Angular Material官方对应组件即可，Angular12配套的Material组件已经覆盖了mde的所有主流功能，且无兼容问题。
若需要保留原mde的API用法，可以替换为社区维护的适配高版本Angular的fork版本，直接修改package.json中的依赖配置即可。
方案3：强制覆盖依赖版本（npm 8.3+/yarn 支持）
如果需要继续使用原@material-extended/mde@^3.0.3版本，可以在package.json中添加overrides配置，强制mde使用项目当前的@angular/animations版本：
```
{
  "overrides": {
    "@material-extended/mde": {
      "@angular/animations": "$@angular/animations"
    }
  }
}
```
配置完成后重新执行依赖安装命令即可生效，该配置会强制覆盖mde的对等依赖要求，只要无运行时报错即可正常使用。