The simple way
This dont always work but here is a simplistic approach:
- Delete your node_modules folder and package-lock.json to clear any cached or conflicting dependencies.
- Make sure all @angular packages are set to the exact same version in package.json (e.g., 19.2.14).
- Run
npm install
- If that does not work continue below
Get list of available package updates
Use the npm-check-updates command to get a list of recommended version updates for all npm packages in the project. (E.g. what is the latest available version number for all the packages)
In Angular project root (where the package.json file is) run:
npx npm-check-updates
(is just a dry run wont change anything)
npx npm-check-updates -u
(updates the package.jon file, follow up by npm install to actually install the new versions)
More info: https://www.npmjs.com/package/npm-check-updates
Bump all packages
A recommended approach is to update all “Angular” type of packages first and then any “non Angular packages”.
In Angular project root edit package.json:
Bump all packages with the word “angular” in them to the latest version number (see output from the npm-check-updates command). See this PR diff as an example:
https://dev.azure.com/who-umc/Products/_git/CAT/pullrequest/12413?_a=files&path=/Umc.Cat.Core/src/ClientSPA/package.json
Then run:
npm install
-> might get dependency errors, cant install
npm install --force
-> forces the install of angular packages
In the above mentioned scenario (just bump angular packages) this works.
As a second step; repeat this for all non-angular packages.
Package.json version interval handling
Whats the difference between ~ and ^ in the acceptable version “interval” value in package.json?
See:
https://stackoverflow.com/questions/22343224/whats-the-difference-between-tilde-and-caret-in-package-json
| value | desc |
|---|---|
~version |
Approximately equivalent to version, i.e., only accept new patch versions See npm semver – Tilde Ranges |
^version |
Compatible with version, i.e., accept new minor and patch versions See npm semver – Caret Ranges |
version |
Must match version exactly |
>version |
Must be greater than version |
>=version |
Must be equal or greater than version |
<version |
Must be lesser than version |
<=version |
Must be equal or lesser than version |
1.2.x |
1.2.0, 1.2.1, etc., but not 1.3.0 |
* |
Matches any version |
latest |
Obtains latest release |
The above list is not exhaustive. Other version specifiers include GitHub urls and GitHub user repo’s, local paths and packages with specific npm tags
Official Docs
More tips see this blobpost:
https://www.hostingadvice.com/how-to/update-npm-packages/
A useful npm command for showing peer dependencies of 1 level down:
npm ls --depth=1
(Vary the depth number to show deeper dependencies)