Version 5.0 of Ionic (Magnesium) is available since February 11th. This new major version of the framework comes with a lot of evolutions.
What has really changed compared to the previous version? Are the good practices of version 4 still up to date with this new version? What effort must be made to migrate an application from version 4 to version 5?
What’s going to change in Ionic 5?
Lots of new features and enhancements, but no major disruptions.
This is indeed what it appears from the announcement of Ionic on their blog and the consultation of the list of changes – changelog – available on github.
In addition, there will be backward compatibility of api from version 4 to version 5, which will make it even easier to migrate an application from version 4 to version 5, which is great news!
As an official partner of Ionic, Jnesis has decided to analyse the main changes. Among the main improvements of Ionic version 5, we can therefore note the following :
- The suppression of Events in favour of rxjs observables/observers
- New default colors are available for Ionic 5
- The “mode” attribute of an element now applies to itself as well as to all its children
- There are no more icons specific to Android or iOS. However, new options are available to customize the appearance of the icons
- The styles have been reviewed:
- replacement of attributes by classes
- change in the media queries
- the activated class has been replaced by ion-activated
- some global CSS properties have been updated
- Some components have been modified (Action Sheet, Anchor, Back Button Card Split Pane, Button FAB Button Item Menu Button Tabs, Controllers, Header / Footer, List Header, Menu, Nav Link, Radio, Searchbar, Segment, Segment Button, Select Option, Skeleton Text)
How to migrate an application from version 4 to the latest version?
Unlike the migration from version 3 to version 4, which included very important changes in the structure of the framework, the migration from version 4 to version 5 is much less cumbersome.
Before upgrading the application to version 5, it is recommended to update the application to the latest version 4, then to correct all the js warnings present in the application (warnings in version 4 not corrected will generate errors in version 5).
Once the warnings have been corrected, run the following command:
npm i @ionic/angular@latest --save Most of the adaptations are then visual (color updates, custom CSS properties, icons or styles in the components).
Don’t hesitate to contact us if you wish to be supported by real ionic experts in your migration process or to carry out a preliminary audit…
