Starting with version 4 of Ionic, upgrading should not involve major changes to your application. It is always best, however, if upgrades are handled in a systematic and orderly fashion. We suggest the following strategy.
- Always upgrade one major version at a time, and make sure you are at the latest patch level of that version before moving to the next major version.
- Treat the framework upgrade separate from Capacitor.
- Treat any third-party dependencies separate from the framework upgrades as much as possible.
- Take baby steps. Upgrade the Ionic Framework one step at a time. If you are using Angular, upgrade to the latest compatible Angular version with each step.
Examples
These example steps focus on projects that use Angular. This is because the Angular team releases major versions on a fairly regular cadence and publishes specific steps to take for each version. As it applies to the Ionic Framework, the steps are similar for React or Vue.
A Simple Example
Let's say you are on Ionic version 5 with Angular 10, and you want to get to Ionic version 6 with Angular 13. The following steps are suggested as a best-practice strategy to :
- Create a git branch for the upgrade work.
- Upgrade to the latest patch level for Ionic version 5.
- Fully test the application with the console open and note any console log warnings from Ionic. These generally deal with items that have been deprecated and will be breaking changes with version 6.
- Fix the console log warning messages that were noted.
- Commit these changes.
- Upgrade Angular, one major version at a time following Angular's guide for each version, until you reach version 12. Commit your changes between each upgrade.
- Upgrade to version 6, following our guide.
- Commit these changes.
- Upgrade from Angular 12 to Angular 13 following Angular's guide.
- Commit these changes.
- Squash all to a single commit and create a pull request to merge these changes into your main branch.
A More Complex Example
Let's say you are on Ionic version 4 with Angular 7, and you want to get to Ionic version 6 with Angular 13. Follow these steps:
- Create a git branch for the upgrade work.
- Upgrade to Ionic 4.11.10.
- Fully test the application with the console open and note any console log warnings from Ionic. These generally deal with items that have been deprecated and will be breaking changes with version 5.
- Fix the console log warning messages that were noted.
- Commit these changes.
- Upgrade from Angular 7 to Angular 8 using Angular's guide.
- Commit these changes.
- Upgrade to Ionic Version 5. Given that Ionic version 5 supported multiple versions of Angular over its lifetime, you may need to upgrade to at least Angular 9 for this step.
- Commit these changes.
- Upgrade Angular, one major version at a time following Angular's guide for each version, until you reach version 12. Commit your changes between each upgrade.
- At this point, you should be at the latest patch level of Ionic version 5 and the latest patch level of Angular 12. Run a full set of tests, looking for deprecation warnings in the console again.
- Fix the console warnings.
- Upgrade to version 6, following our guide.
- Commit these changes.
- Upgrade from Angular 12 to Angular 13 following Angular's guide.
- Commit these changes.
- Squash all to a single commit and create a pull request to merge these changes into your main branch.
Final Checks
As a final check, it is a best-practice to generate a new application and compare the versions of the base dependencies. This will help ensure that you have a set dependencies that are consistent with what a brand new application would use.
A word of caution here: the starter may not use the latest version of all dependencies. In many cases, it is OK to upgrade past those versions so long as you are consistent. In some cases, it is not. For example, Angular, React, or Vue may have specific restrictions on the versions of TypeScript that are acceptable. Angular in particular can be strict about this as well as the version of rxjs that is used. In such cases, always check with the applications framework's documentation.
Ongoing Maintenance
This process is very easy if done on a regular basis, but can become problematic if left to sit for longer periods of time. As such, it is a best-practice to include dependency updates in your sprint planning at least once every three to six months.
Comments
0 comments
Article is closed for comments.