Angular 14安装Angular Material后遇TS2707及依赖冲突问题求助

一、核心问题根源 #

TS2707错误是因为安装的Angular Material版本与Angular 14不兼容，导致内部指令声明的泛型参数数量不匹配；ERESOLVE依赖冲突则是由于高版本Material对Angular的peer依赖要求与当前项目版本不匹配。

二、分步修复步骤 #

1. 卸载现有不兼容的Material依赖 #

先彻底移除项目中已安装的Material相关包：

npm uninstall @angular/material @angular/cdk @angular/animations

2. 安装与Angular 14严格匹配的Material版本 #

Angular 14对应的稳定Material版本为14.x.x，直接指定版本安装：

npm install @angular/material@14 @angular/cdk@14 @angular/animations@14

注意：Angular Material、CDK必须与Angular核心版本完全一致，否则必然出现类型或依赖冲突。

3. 清理缓存并重建项目 #

执行以下命令彻底清理残留缓存，避免旧文件干扰：

rm -rf node_modules .angular/cache package-lock.json
npm install
ng build --clean

4. 验证模块引入正确性 #

检查app.module.ts中引入的Material模块是否为14版本对应模块，示例：

import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    // ...其他核心模块
    MatButtonModule,
    MatInputModule
  ]
})
export class AppModule { }

禁止引入15+版本的Material模块，这类模块包含与Angular 14不兼容的泛型声明。

5. 顽固依赖冲突兜底方案 #

若仍出现ERESOLVE错误，先确认package.json中Angular核心版本为14.x.x，再手动锁定所有Angular相关包版本：
在package.json中确保以下依赖版本统一：

{
  "@angular/core": "14.2.0",
  "@angular/common": "14.2.0",
  "@angular/material": "14.2.0",
  "@angular/cdk": "14.2.0",
  "@angular/animations": "14.2.0",
  // 其他Angular相关包版本统一为14.2.0
}

然后执行：

npm install --legacy-peer-deps

三、验证修复结果 #

执行ng serve或ng build，检查TS2707错误是否消失，同时确认控制台无依赖冲突警告。

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