It’s very painful when you decide to upgrade from v5 to v7.
I’ve experienced this and here are some highlights in case you have a plan to update Ionic from v5 to v7
1. Create a brand new project with v7
Despite Ionic team support you migrate from v5 to v7 with the migrate checklist tool support. But after 2 days of trying this, I noticed that it seemed impossible to do this way (at least in the case of my project). Below are some main reasons:
- You have to migrate from v5 to v6 first (one by one) before going to v7
- From v5 to v6 there are some libraries that are out of support. You need to fix the code to make code build no error to continue migrating. Example: remove the old library. add a new one. change the way of code. test again.
- From v6 to v7 you need to do the same steps above to make the migrate success. So, It costs you double the effort.
- The library conflict is the most painful part.
For the reasons above, the better way is to create a brand new project.
Migrate the files from the old source to the new source
After creating a new project. It’s time to migrate all files from the old project to new one. You have to care about all the files below
- page views
- components
- services
- pipes
- directives
- routers
into the new project (takes around 30 mins).
Take note all import URLs causing errors need to be tested again
after copying all files to the new project. You should run ionic-serve to see what error happen in the project.
Take note of all these errors & file path to the Excel file. Then categorize it if some file has the same error.
Example: error related to in-app browser package. You only need to fix 1 page and then apply to another page later
List down all packages installed in package.json & check which library is not compatible with the new ionic version
Compare 2 package.json files between 2 projects. Remove the same package name & highlight the different one.
Below are some important packages of my project that need to be updated
- all native v5 start with Cordova -> migrate using to v7 Capacitor. Need to find a similar package provided for the Capacitor
- in-app-browser
- file download
- file opener
- list down libraries that no longer used because the ionic new version is already supported
- ngx-datetimepicker
- libraries which are different implement codes in the new version
- ngx-clipboard
- firebase
It’s maybe different from yours. Please consider.
Testing every library after install make sure it worked
Don’t install all libraries at one time. Instead, install one by one. All error codes just comment. Because you need to test whether the library worked or not. And then can build with –prod mode or not.
After testing whenever one function is working well. Commit to source control version. Just to make sure something wrong you can rollback to the specific checkpoint.
Tips: should create a new page & implement all testing scripts of the library. or implement in home.page.html. for easier to test
Build your app to test with the native environment
Last but not least, the most important part is to test your new project with the native environment to make sure everything works.
Enjoy, your new journey with the new Ionic version. Happy coding.
