Don’t be Surprised, it is ionic 3.0

Are you surprised like me while creating ionic 2 project ?

Don’t be Surprised, it is ionic 3. Ionic have updated Ionic 2.0 to Ionic 3.0 to be compatible with Angular 4.0.0 because Angular 4 has been released recently. This upgrade introduces new features like smaller and faster applications, support for a more recent version of TypeScript 2.1 and 2.2.

Ionic 3 will improve the build time and type checking in your application. It also introduces ability to use async await in Ionic Framework, and much more. For more information, see the Angular 4.0.0.

The selectors to style the text color of the native text elements have been removed

h1[color], h2[color], h3[color], h4[color], h5[color], h6[color], a[color]:not([ion-button]):not([ion-item]):not([ion-fab]), 
p[color], span[color], b[color], i[color], strong[color], em[color], small[color], sub[color], sup[color]

These are officially gone and therefore these elements will not get the color unless the ion-text attribute is added.

Creating new application in Ionic 3 is same as ionic 2 but there is some file which is different from ionic 2, some functionality is deprecated and many bugs resolved like alert, content, date-time, infinite-scroll, item-siding, navigation, split-pane, slides and virtual-list.

Ionic 3 has added new Features like module-loader, navigation, split-pane , util, etc.

Create Ionic 3 Application

First of all install the latest version of the CLI and Cordova. And also install recent version of Node.js

Cordova for native app development:

$npm install -g ionic cordova

$ ionic start ionicv3demo --v2

The –v2 flag will still be required for now. This doesn’t mean you’ll get a 2.x.x version of Ionic, just the latest/current (3.x.x) version that has been released

$ cd ionicv3demo

$ ionic serve

What are the updates in ionic 3?

1. For ionic 3 the package.json will consists of the following dependencies

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

2. SplashScreen and StatusBar are updated from using static methods to using injected providers. This is a better code practice.

In app/app.module.ts

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

providers: [
    StatusBar,
    SplashScreen,
    Storage,
    SharedService,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]

and in app/app.component.ts,

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

this.platform.ready().then(() => {

      StatusBar.styleDefault();
      Splashscreen.hide();

    });

3: BrowserModule and HttpModule
in app/app.module.ts ,

import { BrowserModule } from '@angular/platform-browser'; //update in ionic 3
import { HttpModule } from '@angular/http'; //update in ionic 3

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

Summary

Creating Ionic v3 is rather straightforward. Ionic 2 to Ionic 3 changes in package.json to support Angular 4, TypeScript 2.2, and Ionic 3. Then, changes from standard StatusBar, SplashScreen to the dependency injected one, and change in BrowserModule and HttpModule.