Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Migrating an Ionic 2 Project to Ionic 3

DZone's Guide to

Migrating an Ionic 2 Project to Ionic 3

This tutorial shows you the code to use to move your Ionic 2 mobile app development project over to the new Ionic 3 framework.

· Mobile Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

In this tutorial, we are going to create a brand new ionic 2 project, then migrate it to the new ionic 3.  The news with Ionic 3 is that it works with a newer version of angularjs  (v4) and with a newer version of typescript, which now supports mixins! Mixins help you reuse logic, a similar concept to multiple inheritance but with a twist to avoid the diamond problem.

Step 1: Update Dependencies

In step 1, we are going to update the following libraries to point to their newer versions as following:

  1. Angularjs Dependency: from version 2 to version 4.

  2. Ionic Dependency: from version 2 to version 3.

  3. Typescript Depenency: from 2.0/1 to 2.2.

Your current Ionic 2 package.json should look very similar to this:

"dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/forms": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/platform-server": "2.4.8",
    "@ionic/storage": "2.0.0",
    "ionic-angular": "2.2.0",
    "ionic-native": "2.4.1",
    "ionicons": "3.0.0",
    "rxjs": "5.0.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.7.2"
},
"devDependencies": {
    "@angular/language-service": "^2.4.10",
    "@ionic/app-scripts": "1.1.4",
    "typescript": "2.0.9"
},

Just replace that section with the new updated AngularJS, Ionic, and TypeScripts versions. Replace that above block with:

"dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/core": "3.4.2",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.0.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"
},
    "devDependencies": {
    "@ionic/app-scripts": "1.3.0",
    "typescript": "~2.2.1"
},

Step 2: StatusBar, SplashScreen Update

 StatusBar and SplashScreen are updated from using static methods to using injected providers.  This is a better code practice; it's always better to inject parameters instead of using static methods because it enables more natural and fluid unit tests.  You see, when you inject an object, you can always inject a different object from your tests in order to test different functionality.  This is much better than using "magic" libraries which replace your object under the scenes such as different mockery libraries.  Your code should be purely unit testable rather than manipulated magically by libraries.  

With that said, let's do this static to object injection replacement with the following steps:

  1. Open  app.module.ts  file.

  2. Import SlashScreen .

  3. Import StatusBar .

  4. Add SplashScreen to provider list so that it can be further injected to requiring clients.

  5. Add StatusBar to provider list so that it can be further injected to requiring clients.

  6. Open app.component.ts . 

  7. Update the usage of StatusBar and SplashScreen to the provided instances statusBar and splashScreen instead. 

Let's see the above in actual code:

In app.module.ts, first import SplashScreen and StatusBar you should add these lines to your imports: 

import {SplashScreen} from "@ionic-native/splash-screen";
import {StatusBar} from "@ionic-native/status-bar";

Next, in the very same  app.module.ts , add the splashScreen and statusBar to the providers list:

providers: [
  StatusBar, // Newly add for ionic 3
  SplashScreen, // Newly add for ionic 3
  {provide: ErrorHandler, useClass: IonicErrorHandler
  .
  .
  .

Next, in your client code which used statusBar and splashScreen, use the object instead of static method calls. Open  app.component.ts . It should first look similar to this:

constructor(platform: Platform) {  
    platform.ready().then(() => {    
      // Okay, so the platform is ready and our plugins are available.    
      // Here you can do any higher level native things you might need.    
      StatusBar.styleDefault(); // Note ionic2 used StatusBar ionic 3 --> statusBar   
      Splashscreen.hide();  
  });
  .
  .
  .

Update it to look like this:

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault(); // use provided instances instead, dependency injection rules!
splashScreen.hide();
});

Step 3: BrowserModule and HttpModule

You need to update to have BrowserModule and HttpModule (if you use the latter) in your imports as following:

1. Open app.module.ts . 

2. Add imports for BrowserModule  and HttpModule .

import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';

3. Add BrowserModule and HttpModule to your imports as follows:

imports: [  
  BrowserModule,  // New in ionic 3
  HttpModule,  // New in ionic 3
  IonicModule.forRoot(MyApp),  
  IonicStorageModule.forRoot()],
Summary

Upgrading from Ionic v2 to Ionic v3 is rather straightforward. All you need to do is update your package.json to support Angular4, TypeScript 2.2, and Ionic 3. Then, update the reference from standard SplashScreen to the dependency injected one, and finally, update your BrowserModule and HttpModule- if used- to be imported!

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:
ionic ,mobile ,mobile development ,angular ,angular 4 ,angular applications ,hybrid app ,hybrid app development

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}