npm install brings out could not resolve ERESOLVE message

When I npm install something, I am greeted with this error message:

code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @angular-devkit/build-angular@12.2.17
npm ERR! Found: @angular/compiler-cli@14.0.3
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   dev @angular/compiler-cli@"~14.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler-cli@"^12.0.0" from @angular-devkit/build-angular@12.2.17
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"^12.2.17" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @angular/compiler-cli@12.2.16
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   peer @angular/compiler-cli@"^12.0.0" from @angular-devkit/build-angular@12.2.17
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"^12.2.17" 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.

Whilst I understand I could just install it with --force or --legacy-peer-deps, I would like to solve the root problem, in that which package should I install specifically? In the error message, I see the problem is either from @angular/compiler-cli@"^12.0.0, @angular-devkit/build-angular@12.2.17 but which one is it, and in a broader question, how do I interpret this error message?

Below are my package.json dependencies:

  "private": true,
  "dependencies": {
    "@angular/common": "~14.0.2",
    "@angular/core": "~14.0.2",
    "@angular/forms": "~14.0.2",
    "@angular/platform-browser": "~14.0.2",
    "@angular/platform-browser-dynamic": "~14.0.2",
    "@angular/router": "~14.0.2",
    "@angular/service-worker": "~14.0.2",
    "@capacitor-community/keep-awake": "^2.1.0",
    "@capacitor/android": "3.2.0",
    "@capacitor/app": "1.0.2",
    "@capacitor/clipboard": "^1.0.2",
    "@capacitor/core": "3.2.0",
    "@capacitor/haptics": "1.0.2",
    "@capacitor/ios": "3.2.0",
    "@capacitor/local-notifications": "^1.0.4",
    "@capacitor/storage": "^1.0.3",
    "@ionic/angular": "^5.6.13",
    "ngx-joyride": "^2.4.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^12.2.17",
    "@angular-eslint/builder": "~12.0.0",
    "@angular-eslint/eslint-plugin": "~12.0.0",
    "@angular-eslint/eslint-plugin-template": "~12.0.0",
    "@angular-eslint/template-parser": "~12.0.0",
    "@angular/cli": "^14.0.2",
    "@angular/compiler": "~14.0.2",
    "@angular/compiler-cli": "~14.0.2",
    "@angular/language-service": "~14.0.2",
    "@capacitor/cli": "3.2.0",
    "@ionic/angular-toolkit": "^6.1.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.16.1",
    "@typescript-eslint/parser": "4.16.1",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.7.1",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.6.4"
  },
  "description": "An Ionic project"
}