420 Views

Upgrading to Ionic 3.0

Ionic 3.0 has arrived, but don’t worry this is not a completely new framework. It’s just that people at Ionic have switched to Semver Versioning system so the change in version.
For detailed change list in Ionic 3.0 visit their changelog. But some major upgrades are support for Angular 4.0.0, Typescript 2.1 and 2.2, IonicPage decorator and Lazy Loading.

Starting new project with Ionic 3.0

If you have the Ionic CLI installed and using it to generate applications, then generating the project still the same as we did in our getting started with ionic tutorial.
ionic start AppName TemplateName --v2
The --v2 switch is still required.

Upgrading existing Ionic 2.x.x project to 3.0

Upgrading is not that straight forward, but its easy as there are not many changes required.
Let’s get going

Update package.json

Update the dependencies in package.json as follows remove the existing node_modules directory and run npm install. These upgrade to support Angular 4.0, Ionic native 3.x and Typescript 2.2.

"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"
}

Update app/app.module.ts

Import the BrowserModule
import { BrowserModule } from '@angular/platform-browser';

And then add it to imports

imports: [
  BrowserModule,
  IonicModule.forRoot(MyApp)
],

If you are using Http, import the HttpModule
import { HttpModule } from '@angular/http';
and then add it to the imports in the same file:

imports: [
  BrowserModule,
  HttpModule,
  IonicModule.forRoot(MyApp)
],

Upgrading to ionic native 3.x

With the release of Ionic 3.x, they’ve made two major improvements: drastically reduced code bundle size, and 100% browser development support.
Ionic native plugins are now like angular service and bundle for each plugin you wish to use have to be individually installed, imported and provided. In this tutorial we will show how to import and use StatusBar plugin. for detailed use of each plugin visit the official documentation

If plugin is not previously used or installed run following command to install the cordova plugin and ionic-native plugin provider for the plugin

ionic plugin add cordova-plugin-statusbar
npm install --save @ionic-native/status-bar

To use a plugin, import and add the plugin provider to your @NgModule, and then inject it where you wish to use it.

// app.module.ts
import { StatusBar } from '@ionic-native/status-bar';

...

@NgModule({
  ...

  providers: [
    ...
    StatusBar
    ...
  ]
  ...
})
export class AppModule { }

Now, you can use this plugin using the StatusBar provider like any other Angular service. For example, you can use the status bar plugin in your app/app.component.ts as follows.

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  constructor(platform: Platform, statusBar: StatusBar) {
    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.
      // let status bar overlay webview
      this.statusBar.overlaysWebView(true);
      // set status bar to white
      this.statusBar.backgroundColorByHexString('#ffffff');
    });
  }
}

This should update your project and your project should run smoothly. If you run into any problems, feel free to mention in comment.

Related Posts

Advancde Ionic Components

If you are a Ionic developer, beginner or expert, you will love this project. Publicly being developed in github, ionic3-components repository hosts […]

%d bloggers like this: