Error during NPM installation in Angular despite matching peer dependencies

I am currently overseeing the dependencies for my applications through a company-managed npm package. This method simplifies updates across multiple applications, although I haven’t yet included devDependencies in this process, but that change is on the horizon. Below are some details:

Managed package’s package.json peerDependencies:

"peerDependencies": {  
    "@angular/animations": "^18.2.13",  
    "@angular/common": "^18.2.13",  
    "@angular/core": "^18.2.13",  
    "@angular/forms": "^18.2.13",  
    "@angular/cdk": "18.2.13",  
    "@angular/compiler": "18.2.13",  
    "@angular/material": "18.2.13",  
    "@angular/material-moment-adapter": "18.2.13",  
    "@angular/platform-browser": "^18.2.13",  
    "@angular/platform-browser-dynamic": "^18.2.13",  
    "@angular/router": "18.2.13",  
    "@aws-amplify/ui-angular": "^4.0.10",  
    "@material/theme": "^15.0.0-canary.2a9697dc5.0",  
    "@types/deep-diff": "1.0.5",  
    "@types/luxon": "^3.4.2",  
    "aws-amplify": "~5.3.27",  
    "aws-sdk": "^2.1692.0",  
    "core-js": "^3.38.1",  
    "corejs": "^1.0.0",  
    "custom-event-polyfill": "^1.0.7",  
    "echarts": "^5.6.0",  
    "file-saver": "^2.0.1",  
    "filepond": "^4.31.4",  
    "filepond-plugin-file-validate-type": "^1.2.4",  
    "lodash": "^4.17.21",  
    "luxon": "^3.5.0",  
    "moment": "^2.30.1",  
    "ngx-echarts": "^18.0.0",  
    "ngx-extended-pdf-viewer": "^21.4.6",  
    "ngx-filepond": "^7.0.3",  
    "ngx-pagination": "^6.0.3",  
    "rxjs": "^7.8.1",  
    "sanitize.css": "^13.0.0",  
    "tslib": "^2.8.1",  
    "zone.js": "~0.14.10"  
}  

Application package.json:

"dependencies": {  
    "@my_appstore/company-shared": "file:my_appstore-company-shared-17.4.17.tgz"  
  },  
  "devDependencies": {  
    "@angular-devkit/build-angular": "^18.2.12",  
    "@angular-builders/custom-webpack": "^18.0.0",  
    "@angular/cli": "18.2.12",  
    "@angular/compiler-cli": "18.2.13",  
    "@faker-js/faker": "^9.3.0",  
    "@ngneat/spectator": "^16.0.0",  
    "@types/jasmine": "~4.3.5",  
    "@types/jasminewd2": "~2.0.3",  
    "@types/jest": "^29.5.2",  
    "@types/node": "^18.19.14",  
    "@typescript-eslint/eslint-plugin": "^8.19.0",  
    "@typescript-eslint/parser": "^8.19.0",  
    "commit-and-tag-version": "^11.3.0",  
    "eslint": "^8.57.1",  
    "eslint-config-angular": "^0.5.0",  
    "eslint-config-prettier": "^9.1.0",  
    "eslint-plugin-angular": "^4.1.0",  
    "eslint-plugin-html": "^8.1.2",  
    "eslint-plugin-prettier": "^5.2.1",  
    "jasmine-core": "~4.0.0",  
    "jest": "^29.5.0",  
    "jest-junit": "^16.0.0",  
    "jest-preset-angular": "^14.4.2",  
    "ng-mocks": "^14.11.0",  
    "prettier": "3.3.3",  
    "pretty-quick": "^4.0.0",  
    "sass-lint": "^1.12.1",  
    "tslint-jasmine-rules": "^1.6.1",  
    "typescript": "^5.5.4"  
  }  

The problem arises during the execution of npm install, where I encounter the following error:

npm ERR! Found: @angular/[email protected]  
npm ERR! node_modules/@angular/core  
npm ERR!   peer @angular/core@">=15.0.0 <20.0.0" from [email protected]  
npm ERR!   node_modules/jest-preset-angular  
npm ERR!     dev jest-preset-angular@"^14.4.2" from the root project  
npm ERR!   peerOptional @angular/core@"18.2.13" from @angular/[email protected]  
npm ERR!   node_modules/@angular/compiler  
npm ERR!     peer @angular/compiler@"18.2.13" from @angular/[email protected]  
npm ERR!     node_modules/@angular/compiler-cli  
npm ERR!       dev @angular/compiler-cli@"18.2.13" from the root project  
npm ERR!       1 more (jest-preset-angular)  
npm ERR!  
npm ERR! Could not resolve dependency:  
npm ERR! peer @angular/core@"19.0.5" from @angular/[email protected]  
npm ERR! node_modules/@angular/common  
npm ERR!   peer @angular/common@"19.0.5" from @angular/[email protected]  
npm ERR!   node_modules/@angular/platform-browser-dynamic  
npm ERR!     peer @angular/platform-browser-dynamic@">=15.0.0 <20.0.0" from [email protected]  
npm ERR!     node_modules/jest-preset-angular  
npm ERR!       dev jest-preset-angular@"^14.4.2" from the root project  

It seems that the version jest-preset-angular@“^14.4.2” expects @angular/platform-browser-dynamic within the range of v15 to just under v20, which leads NPM to select the latest version, v19.0.5. This version dependency leads to a request for Angular 19.0.5. However, my intention is to upgrade to version 18, specifically to 18.2.13. There’s clearly a clash between the 18 and 19 versions. If I could either prevent jest-preset-angular from updating to v19 or establish that v18 meets the requirement spanning from 15 to 20, I could potentially solve this issue. It’s crucial for me to maintain this as our organization scales with additional applications.

Hey CreatingStone,

This is a common issue when dealing with mismatched peer dependencies in a large project. Here's a straightforward way to manage your versions efficiently:

  1. First, confirm all Angular-related dependencies are set to version 18.x.x in both your peerDependencies (managed package) and devDependencies (application).

Use this version setting for jest-preset-angular:

"devDependencies": {
  ...
  "jest-preset-angular": "^14.4.2"
}
  1. Deploy npm-force-resolutions to lock down specific versions, ensuring installation consistency:
// Add to package.json
"resolutions": {
  "@angular/core": "18.2.13",
  "@angular/common": "18.2.13",
  "@angular/compiler": "18.2.13",
  "@angular/platform-browser-dynamic": "18.2.13"
}

Execute:

npm install npm-force-resolutions --save-dev
npx npm-force-resolutions
npm install

  1. If problems persist, manually adjust the package.json files to align Angular versions across all references.

This method ensures that your project remains within the desired Angular framework version, without unnecessary updates disrupting your workflow. Let me know how it goes!