January 30, 2019
  • Tutorials
  • Ionic 4
  • Migration

A Guide for Migrating to Ionic 4.0

Matt Netkow

By now, you likely have heard the news that Ionic 4.0 is here! If you’re currently maintaining an older Ionic app though, you might have concerns about the challenges of upgrading to the latest version. While there will be some work involved to migrate over, there’s never been a better time to do so. Take a look below for some of the benefits of upgrading to Ionic 4.0, plus links to our migration guides to ease the process.

Future-Proof Apps

The Ionic Framework has been rewritten from the ground up for the last time: Now, all UI controls are web components, built on open web standards. As a result, Ionic components are no longer tightly coupled to Angular, which opens up compatibility for current favorites like React and Vue, or any JavaScript framework that becomes popular in the future. This also means that future versions of Ionic after 4.0 will be much easier to update given the underlying technology will remain the same.

Another exciting change is that Ionic is embracing framework-specific tooling. Ionic 3 has custom command line and build tooling, as well as custom router implementations, which has often led to some churn and confusion. However, now that Ionic embraces the tooling and architecture of each specific framework, it’s become much simpler to integrate our technology. Using Angular? Use the Angular CLI. Using Vue? Use the Vue CLI, etc. It’s the best of both worlds. So, as your framework of choice evolves, you get the latest and greatest tooling, leaving more time to focus on what matters—adding more value to your app.

Angular is Still a First-Class Citizen

Angular fans, have no fear! Just because Ionic 4.0 broadens our framework reach, doesn’t mean we are leaving it behind. In fact, Angular will continue to be a major focus for us in 2019 and beyond. The best part is that you’ll be able to reuse the majority of your Angular-specific code when updating to Ionic 4.0. Your services, for example, should port over without modification (assuming they aren’t depending on any Ionic-specific functionality). Ionic 4.0 supports Angular 7+ today and will closely follow future major Angular versions.

Truly Cross-Platform

Write and maintain one codebase that will run on any device or operating system across mobile and desktop. This includes native iOS and Android apps, as well as Progressive Web Apps, and even Electron-based native desktop apps. Ionic apps don’t just run on any platform, they are specifically designed to look and feel native to the platform that they run on. The benefit of this approach is that it drastically cuts down on the time and cost to create multi-experience apps that run on iOS, Android, desktop, and more.

Migrating from Ionic 1.0 to Ionic 4.0

This migration involves moving from AngularJS (aka Angular 1) to Angular 7+. There are many architectural differences between these versions so some of the app code will have to be rewritten. The amount of work involved depends on the complexity and size of your app. The upside is that for the most part, the Ionic UI components you know and love from Ionic 1 haven’t changed much.

In terms of a strategy for beginning the migration, identify a time frame (perhaps one or two sprints) to get started. We recommend feature-freezing the Ionic 1 application and getting the code in order: Fix any major bugs, eliminate tech debt, and reorganize as you see fit. Then, identify which features to migrate over and which to abandon. Then, create a new Ionic 4 application and begin porting features over. Once the team is comfortable that the new app is stable, you can shut down the Ionic 1 app.

Migrating from Ionic 3.0 to 4.0

Migration off of an Ionic 3 app will require less work than an Ionic 1 app, but you’ll need time to successfully complete the transition. Begin by reviewing Angular’s release guide to gain an understanding of the changes from Angular 2+ to Angular 7+. Next, generate a new Ionic 4 project and start by copying over various parts of your Angular code such as services, providers, pipes, and components. Work on one feature at a time, from top to bottom, testing as you go.

Two areas that received the most changes are navigation and lazy loading. Instead of using Ionic’s own NavController, we integrate now integrate with the official Angular Router. By embracing the official tooling of each framework, a more consistent and dependable routing experience is achieved. Since navigation has changed, the mechanism for lazy loading has also changed in Ionic 4. Now, this is accomplished using the loadChildren method of the Angular router.

So, what are you waiting for? Check out the full migration guides and begin migrating to Ionic 4.0 today.

If your team would like assistance with the migration, please reach out to us for more information! Ionic offers Advisory Services, which includes Ionic 4.0 training, architecture reviews, and migration assistance.

Matt Netkow