Ionic 1 -> 2 Migration Strategy (ngUpgrade, Angular 1.5, etc)

We love Ionic and have a medium-sized 1.X application that we want to migrate to Ionic 2 / Angular 2. Our 1.X code follows John Papa’s style guide with a lot of directives, relatively thin controllers, and a component-based directory layout.

There’s some basic info at http://ionicframework.com/docs/v2/getting-started/migration/ on migration, and Josh Morony published a sample app conversion tutorial at http://www.joshmorony.com/how-to-convert-an-ionic-1-application-to-ionic-2/ in November.

Angular came out with ng-upgrade as a way to allow Angular 1.X and 2.X to co-exist in the same application, so that as we’re building out new features, we could be building them out in Angular 2. https://angular.io/docs/ts/latest/guide/upgrade.html

I’m still in fact finding mode, trying to figure out how we migrate from Ionic 1 to 2… if anyone has figured this out already then would appreciate any advice:

  • Has anyone tried using ng-upgrade to gradually migrate their Ionic app to use Angular 2 while still using Ionic 1 components?
  • Is it possible for Ionic 1 and Ionic 2 components to co-exist in the same application, if using ng-upgrade?
  • Are there any plans to provide more detailed migration guidelines or CLI tools for moving Ionic 1.X to 2.0?
  • Will an upcoming Ionic 1.X release include Angular 1.5 to allow for migration to Angular 2.0 style components?

Excited to migrate over to 2.X this year, and hoping to manage our ongoing development to align with 2.X as much as possible. Thanks in advance for any tips!

Tom

1 Like

It’s been almost a year since the above post. Here are the answers we’ve figured out:

  • Ionic has provided a migration guide at http://ionicframework.com/files/Ionic2Migration.pdf
  • Ng-upgrade is not a viable option for migration and Ionic 1 and 2 components cannot really co-exist
  • Will an upcoming Ionic 1.X release include Angular 1.5 to allow for migration to Angular 2.0 style components? Ionic v1.3.2 uses Angular 1.5.3, so this may be possible, but I haven’t tried it.

We looked at the Angular 1.5 approach but it seemed cleaner and easier to repurpose and re-implement everything to Ionic 2 from a fresh Ionic 2 starter project.

Though Angular 1 and 2 have the same name, they’re not the same language or framework at all. Typescript, object oriented programming, Ionic’s change from routing to a navcontroller, and the new build chain (with Ahead-of-time compilation) are all awesome improvements, but they make migration difficult.

We also had some problems with certain Angular 1 libraries that were excluded / removed from the Angular 2 scope, particularly ng-resource. We found a community substitute at https://github.com/troyanskiy/ng2-resource-rest.

If I had an existing Ionic 1 app that met requirements and didn’t require major functional enhancements, I wouldn’t rush to migrate to Ionic 2. We moved over to Angular 2 / Ionic 2 while doing a major redesign of the app, and we brought over some code (e.g. services and filters).

Ionic 2 is a much better framework and I’m really happy that we made the investment to switch over. It also positions us to expand our app into a web-based app (which could be quite fast with Ahead-of-Time compiling) and possibly tap into SEO-friendly approaches such as Angular Universal in the future.

2 Likes

It’s been a year later. I wonder if any further solution for this.
There are document here: https://ionicframework.com/docs/v2/intro/migration/ but not into details.
If it is actually “should not migrate into Ionic 2”, should we warn them in the doc too?