Guide: How to update to Ionic 3.X

Ionic Framework ionic-v3
1

image
image1200×600 35.8 KB

Updates:

  • 08.11.2017 - Angular 5.0 and Ionic 3.9

I want to share this guide to the community because there comes often the question: “How can I update from Ionic 2.x to Ionic 3.0?”. This guide should help you to upgrade in just 3 simple steps.

Before you start there are three important points you should do first:

  1. Read the release blog post for Ionic 3.0 to understand which things have changed. Follow the links!

  2. Read the blog post about Ionic Native 3.

  3. Read the blog post about LTR support (shiped with Ionic 3.4).

Now we can start to update your Ionic 2.x App! There are only three simple steps you have to do.

Step 1 - Update your package.json

First of all, you should delete the node_modules directory. Then you can copy paste the required dependencies.

"dependencies": {
  "@angular/common": "5.0.3",
  "@angular/compiler": "5.0.3",
  "@angular/compiler-cli": "5.0.3",
  "@angular/core": "5.0.3",
  "@angular/forms": "5.0.3",
  "@angular/http": "5.0.3",
  "@angular/platform-browser": "5.0.3",
  "@angular/platform-browser-dynamic": "5.0.3",
  "@ionic-native/core": "^4.3.2",
  "@ionic-native/splash-screen": "^4.3.2",
  "@ionic-native/status-bar": "^4.3.2,
  "@ionic/storage": "2.1.3",
  "ionic-angular": "3.9.2",
  "ionicons": "3.0.0",
  "rxjs": "5.5.2",
  "sw-toolbox": "3.6.0",
  "zone.js": "0.8.18"
},
"devDependencies": {
  "@ionic/app-scripts": "3.1.7",
  "typescript": "~2.4.2"
}

Of course, you should keep your old additional dependencies if you added any other libraries. When you change your package.json you can run npm install.

Angular 5.0

Because of Angular 5.0 some Angular 4.x functions/objects etc. are deprecated. Follow this website to upgrade: https://angular-update-guide.firebaseapp.com/

Step 2 - Update your app.module.ts:

Import the Angular BrowserModule in your app/app.module.ts file:

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

and then add it to the imports in the same file:

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

If you are using Http, import the HttpClientModule in your app/app.module.ts file:

import { HttpClientModule } from '@angular/common/http';

and then add it to the imports in the same file:

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

ionic-app-scripts

Since ionic-app-scripts 2.0 you have to add the build/vendor.js file to your index.html.

...
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <script src="cordova.js"></script>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- all code from node_modules directory is here -->
  <script src="build/vendor.js"></script>

  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
...

ion-item

Change <item-left> to <item-start> and <item-right> to <item-end>

ioni-icon

Change <icon-left> to <icon-start> and <icon-right> to <icon-end>

LTR / RTL

Those of you who do not need to support RTL languages may be concerned by the CSS bundle size increasing. Don’t worry, we got you! By setting $app-direction: ltr in your Sass, your CSS will appear to be directionless (as if you never included RTL support in your app).

What if your app is RTL only? Same thing, just set $app-direction: rtl and your app will only support RTL.

Step 3 - Update to Ionic Native 3:

As you can see in the package.json we updated to @ionic-native/core and removed the old ionic-native dependency.

For each native plugin, there is now a new npm install command. For example, the Splash Screen can be installed with this command:

ionic cordova plugin add cordova-plugin-splashscreen
npm install --save @ionic-native/splash-screen

Go to the docs Native APIs - Build Open-Source Native Application Experiences and run the install command for all your used native plugins.

Then import your plugins in your app.module.ts file

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

and then add it to the providers in the same file:

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

And change your app.component.ts imports from

import { StatusBar, Splashscreen } from 'ionic-native';

to

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

And that’s it! If nothing went wrong you should now run the latest Ionic 3.0 release. Run ionic serve to test it out.

Ionic 3 Lazy Loading

If you want to use lazy loading pages you should read the official upgrade guide.
I will update this part soon.

Follow Me.

Follow me on GitHub: danielsogl (Daniel Sogl) · GitHub

17 Likes