Ionic 6, upgrade Angular version from 13 to 15

Question

I had an Ionic 6 app for over 6 months and it was using Angular 13 and now when I want to install some npm packages, they are being compatible with Angular 15. For example:

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"~13.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^15.0.0" from [email protected]

Is there a way to upgrade the Ionic 6 to use the Angular 15 version?

Answer 1

Run command ng update and it will update for you. First make sure your repository is clean by committing or stashing your changes (if using version control).

Answer 2

You need to update step by step. So will go from 13-14-15 ect... ng update On each step you check for not outdated packages with.

npm outdated

If you would like to use specific versions of packages leaving them not updated (not recomended) than use the command

npm install --legacy-peer-deps

Note: There are major changes on 15. My last project failed from 14 to 15 and had to roll it back to take time to make manuall changes also.

Answer 3

As mentioned on other comments and as you already did, you have to upgrade step by step. You can check this page https://update.angular.io in order to see if you need to make any update to your code.

If you have dependencies and want to update them, you can you get into their github page (you can do it via the npm page if you don't know the repository) and check in the package.json what angular version their using. If the actual code version uses the version of angular you want, you can then update with:

ng update @angular-eslint/builder@latest

This is for the @angular-eslint case.

If you want the actual package.json have a version that you don't want - let's say you're not updating to the latest version of angular or the previous - you can check the CHANGELOG to see what version of the package supports your angular version, and with that do:

ng update @angular-eslint/builder@<version>

If you don't have a CHANGELOG file, then try to check on the package.json history, in order to check when this package use your angular version and so select the correct package version.

Hope this helps.