执行npm install时出现依赖冲突错误的解决咨询

克隆Git仓库后尝试在浏览器运行应用，首次执行npm install未完成，再次执行时出现如下依赖冲突错误：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @angular-devkit/build-angular@16.2.0
npm ERR! Found: @angular/compiler-cli@10.0.14
npm ERR! node_modules/@angular/compiler-cli
npm ERR! dev @angular/compiler-cli@"~10.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler-cli@"^16.0.0" from @angular-devkit/build-angular@16.2.0
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^16.2.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/compiler-cli@16.2.1
npm ERR! node_modules/@angular/compiler-cli
npm ERR! peer @angular/compiler-cli@"^16.0.0" from @angular-devkit/build-angular@16.2.0
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^16.2.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

已尝试以下操作但未解决：

• 使用项目创建时的Node.js 14.15.1版本，但VS Code提示该版本不再受支持，要求更新
• 多次安装/卸载Node.js、切换不同版本
• 删除node_modules文件夹

项目的package.json内容如下：

{
  "name": "Analise-Sensorial-app2.0",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^11.0.2",
    "@angular/common": "~10.0.14",
    "@angular/core": "~10.0.0",
    "@angular/forms": "~10.0.0",
    "@angular/platform-browser": "~11.2.14",
    "@angular/platform-browser-dynamic": "~11.2.14",
    "@angular/router": "~10.0.0",
    "@ionic-native/camera": "^5.29.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/file": "^5.29.0",
    "@ionic-native/file-path": "^5.29.0",
    "@ionic-native/file-transfer": "^5.29.0",
    "@ionic-native/full-screen-image": "^5.29.0",
    "@ionic-native/native-page-transitions": "^5.30.0",
    "@ionic-native/photo-viewer": "^5.29.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0",
    "@ionic/pwa-elements": "^3.0.1",
    "bootstrap": "^5.0.0-beta1",
    "chart.js": "^3.7.1",
    "chartjs-plugin-datalabels": "^2.1.0",
    "cordova": "^10.0.0",
    "cordova-android": "9.0.0",
    "ngx-chips": "^2.2.2",
    "platform": "1.3.6",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1002.0",
    "@angular/cli": "~10.0.5",
    "@angular/compiler": "~10.0.0",
    "@angular/compiler-cli": "~10.0.0",
    "@angular/language-service": "~10.0.0",
    "@ionic/angular-toolkit": "^2.3.0",
    "@ionic/lab": "3.2.7",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.5.5",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "com-sarriaroman-photoviewer": "^1.2.5",
    "com.telerik.plugins.nativepagetransitions": "^0.7.0",
    "cordova-browser": "^6.0.0",
    "cordova-plugin-camera": "^5.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-filepath": "^1.5.8",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "es.keensoft.fullscreenimage": "^0.2.10",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-camera": {},
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-file": {},
      "cordova-plugin-filepath": {},
      "com-sarriaroman-photoviewer": {},
      "es.keensoft.fullscreenimage": {},
      "com.telerik.plugins.nativepagetransitions": {}
    },
    "platforms": [
      "android",
      "browser"
    ]
  }
}

1. 修复依赖版本不匹配问题 #

错误核心是@angular-devkit/build-angular被意外升级到16.2.0版本，而项目依赖的Angular版本是10.x，两者版本不兼容。从package.json看，原本指定的@angular-devkit/build-angular版本是^0.1002.0（对应Angular 10.x），但实际安装时可能被npm升级到了高版本。

执行以下步骤：

• 删除项目根目录下的package-lock.json文件
• 确认package.json中devDependencies的@angular-devkit/build-angular版本为^0.1002.0（和现有Angular版本匹配）
• 执行安装命令：

npm install --legacy-peer-deps

使用--legacy-peer-deps是因为项目中部分依赖（如Angular各模块版本不一致，animations是11.x，其他是10.x）存在旧版peer依赖问题，该参数会让npm采用旧的依赖解析规则，避免冲突。

2. 处理Node.js版本问题 #

项目基于Angular 10和Ionic 5，Node.js 14.15.1完全兼容。VS Code的版本提示仅为警告，不影响运行：

• 推荐用nvm（Node版本管理器）管理版本：在项目根目录创建.nvmrc文件，内容写14.15.1，执行nvm use即可自动切换到指定版本
• 若不想用nvm，直接忽略VS Code的警告即可，14.15.1版本能正常运行该项目

3. 验证安装结果 #

安装完成后，执行ng serve启动项目，确认能正常运行。如果仍有问题，删除node_modules和package-lock.json后重新执行npm install --legacy-peer-deps。

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