Updating your Ionic 2 application to Ionic 3

Ionic 3 – What’s new?

Ionic 3 has been released earlier this year and with it a lot of new features. This includes a major update to Angular 4 and the latest version of Typescript. Structural changes to your application is also an optional feature included in Ionic 3. Some other changes are:

  • Lazy loading of page components
  • Bug fixes
  • Refactoring
  • New responsive grid
  • Small changes to existing components

Updating from Ionic 2 to Ionic 3

  1. Remove your existing node_modules directory from the project.
  2. Update the dependencies in the package.json file to the following:
"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.0",
 "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"
}
  1. Run the following command from your command window:
  $ npm install
  1. Make sure to import the BrowserModule in your app.module.ts file and add it to the imports section in the same file. If you use http in your application import the HttpModule and add it to imports as well (See below):
  import { BrowserModule } from '@angular/platform-browser';
  import { HttpModule } from '@angular/http';
 imports: [  
BrowserModule,  
HttpModule,  
IonicModule.forRoot(MyApp)
],

That’s it – your app is now updated to Ionic 3!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s