Mobile App Development with Ionic 2, 1st Edition

Appendix A. Migrating Ionic 1 to Ionic 2

If you have an existing Ionic 1 application, you might be wondering how to migrate your application. Unfortunately, there is no easy solution to do this. So much has evolved in both the Ionic Framework and Angular that it is just not practical. We were faced with the same challenges with several of our applications as well. Here are some guidelines that can help you rebuild your application, based on what we found worked.

Create a New Ionic 2 Application

The cleanest method to migrate your Ionic 1 app is actually to start fresh. With so many improvements and changes, it is just easier to build from scratch. Select the template that best matches your application’s navigation structure and generate a new app using the CLI.

Create Your Page Structure

With your base application in place, the next step we recommend is to lay down the page structure. Think of this step as the framing of the new house, while the previous step was the pouring of the foundation. First, remove any pages that might have been generated by the CLI, then create stub pages for your application. The Ionic CLI makes this very easy with the $ ionic g page command. If you are building a tab-based application, remember the generate command can also assist with that.

Update the Theming

Ionic 1 could use SCSS, if you enabled it. Now this is how your CSS is generated in Ionic 2. The main .scss file in located in src/theme/variables.scss, and this is where any global changes ...