How to upgrade to Ionic 3/Angular 4

If you have not already heard .Ionic 3 is already released which comes with Angular 4 support and many features .So in this post I'll show you quickly how you can easily upgrade to Ionic 3 and Angular 4 .

Don't worry ,Ionic 3 is not a completely new rewritten framework as it was the case with Ionic 2 .The reason behind this version of Ionic 3 is the compatibility with Angular 4 which introduces new features ,newest version of TypeScript but most importantly ,Angular 4 produces faster and smaller apps .You can read more about this on Angular 4 official blog

Ionic 3 has also introduced some changes in project structure but they are optional .

Ionic 3 has a lot of great features :

  • The lazy loading of modules .
  • The support of async/await .
  • IonicPage decorator for setting up deep links ,etc.

How to upgrade to Ionic 3 ?


Upgrading your project to Ionic 3 is actually very easy .All you need to do is updating your package.json and execute npm install

So go ahead and open package.json of your project and copy this

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

Remove the old node_modules then execute

npm install 

Wait until the new dependencies are installed and then continue with these changes which are mainly related to Angular 4.

Open app/app.module.ts then import the BrowserModule from @angular/platform-browser

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

Next you need to add it to the imports array

imports: [
    BrowserModule,
    /* ...*/
],    

In case your are using the HTTP module in your application ,you need to import the HttpModule in app/app.module.ts: and add it to imports array

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

Don't forget to also install Ionic native via npm with

npm install --save @ionic-native/core

Now you need to check you have Ionic 3 successfully installed so go ahead inside your project folder and run

ionic info 

Your system information:

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.2
Node Version: v7.9.0
Xcode version: Not installed

Upgrading to Ionic 3.0.1


Ionic 3.0.1 is released and has 3 minor updates .To upgrade your project to this version ,follow these steps

First make sure you have upgraded your project to Ionic 3.0.0 then open package.json and simply change ionic-angular from 3.0.0 to 3.0.1

"ionic-angular" : "3.0.1"

Then open up your terminal and enter

npm install

You can use ionic info to check if Ionic framework is upgraded to the latest version successfully .

Conclusion


So that is all you need to upgrade your project to use Ionic 3 instead of Ionic 2 .See your on the next posts .

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status