Angular 13升级至14遇ESLint依赖冲突及测试失败问题求助

你的问题根源是依赖版本不匹配：强制升级Angular核心到14后，CLI、@angular-eslint系列、Angular Material/CDK、构建工具等仍停留在13版本，这些包和Angular核心版本强绑定，版本不一致就会触发兼容错误。

按以下步骤操作，能彻底解决问题：

1. 清理旧依赖文件 #

先删除本地依赖缓存和锁文件，避免版本冲突：

rm -rf node_modules package-lock.json

（Windows用户执行：rmdir /s /q node_modules 和 del package-lock.json）

2. 用官方升级工具同步核心依赖 #

Angular提供的ng update会自动处理依赖兼容，优先用这个工具升级核心包：

npx @angular/cli@14 update @angular/cli@14 @angular/core@14

这个命令会自动把所有Angular核心包（common、compiler、forms等）、@angular-devkit/build-angular升级到14.x版本，同时更新CLI配置。

3. 升级@angular-eslint系列 #

Angular 14对应@angular-eslint的14.x版本，运行以下命令升级所有eslint相关插件：

ng update @angular-eslint/schematics@14

这会同步更新@angular-eslint/builder、@angular-eslint/eslint-plugin等所有相关包到14.x。

4. 升级Angular Material/CDK #

Material和CDK版本必须和Angular核心一致，执行：

ng update @angular/material@14

5. 升级自定义构建工具 #

你的项目用了@angular-builders/custom-webpack，13版本不兼容Angular14，手动升级到14.x：

npm install @angular-builders/custom-webpack@14 --save-dev

6. 验证并安装依赖 #

检查package.json，确保以下关键包版本统一为14.x（示例如下），然后重新安装依赖：

npm install

升级后关键依赖参考（package.json片段） #

"dependencies": {
  "@angular-devkit/architect": "^0.1402.12",
  "@angular/animations": "^14.2.12",
  "@angular/cdk": "^14.2.12",
  "@angular/common": "^14.2.12",
  "@angular/compiler": "^14.2.12",
  "@angular/core": "^14.2.12",
  "@angular/forms": "^14.2.12",
  "@angular/material": "^14.2.12",
  "@angular/platform-browser": "^14.2.12",
  "@angular/platform-browser-dynamic": "^14.2.12",
  "@angular/router": "^14.2.12",
  // 其他非Angular依赖保留原版本即可
},
"devDependencies": {
  "@angular-builders/custom-webpack": "^14.0.0",
  "@angular-devkit/build-angular": "~14.2.12",
  "@angular-eslint/builder": "14.0.2",
  "@angular-eslint/eslint-plugin": "14.0.2",
  "@angular-eslint/eslint-plugin-template": "14.0.2",
  "@angular-eslint/schematics": "14.0.2",
  "@angular-eslint/template-parser": "14.0.2",
  "@angular/cli": "^14.2.12",
  "@angular/compiler-cli": "^14.2.12",
  "typescript": "^4.7.4" // Angular14支持4.6.x/4.7.x，可根据需求选择
  // 其他dev依赖如eslint、typescript-eslint等，@angular-eslint会自动同步兼容版本
}

7. 验证升级结果 #

运行测试和构建命令确认正常：

npm run test
npm run build

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