Ionic 3 and Angular 5 Mobile App Example

by Didin J. on Nov 03, 2017 Ionic 3 and Angular 5 Mobile App Example

Step by step tutorial of the brand new Angular 5 implementation with Ionic 3 to create Mobile App

Step by step tutorial of the brand new Angular 5 implementation with Ionic 3 to create Mobile App. After Angular 5 announce yesterday, we have to do a little experiment to implement Angular 5 with Ionic 3 Mobile App development. There are a lot of Angular 5  improvements that make Angular 5 app faster, smaller and simpler.

What we build is same as previous Ionic 3 and Angular 4 Mobile App Example but using new features of Angular 5.

Straightforward, prepare the following tools, framework, and modules:

- Node.js (make sure using ‘Recommended’ version)
- Ionic 3
- Angular 5

After installing Node.js and `npm` command works on the terminal (Linux/Mac) or Node Command Line (Windows), open the terminal or Node command line. Update Ionic to the latest version using this command.

sudo npm install -g [email protected]


1. Create a New Ionic 3 App

As usual, we always start the tutorial from scratch. On the terminal go to Ionic 3 projects folder then type this command to create a new Ionic 3 app.

ionic start ionic3-angular5 blank

Then go to the newly created Ionic app folder.

cd ./ionic3-angular5

Always make sure every new Ionic update working properly by run the new created Ionic 3 app first.

ionic serve -l

It will automatically open the default browser and default Ionic 3 page.

Ionic 3 and Angular 5 Mobile App Example - Ionic 3 Page

Open the newly Ionic 3 app folder in your favorite IDE or text editor then open the `package.json` file to see default dependencies that generated by Ionic 3.

"dependencies": {
    "@angular/common": "4.4.4",
    "@angular/compiler": "4.4.4",
    "@angular/compiler-cli": "4.4.4",
    "@angular/core": "4.4.4",
    "@angular/forms": "4.4.4",
    "@angular/http": "4.4.4",
    "@angular/platform-browser": "4.4.4",
    "@angular/platform-browser-dynamic": "4.4.4",
    "@ionic-native/core": "4.3.2",
    "@ionic-native/splash-screen": "4.3.2",
    "@ionic-native/status-bar": "4.3.2",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.8.0",
    "ionicons": "3.0.0",
    "rxjs": "5.4.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },


2. Upgrade Angular Dependencies to the latest Angular 5

As you see on previous steps that generated Ionic 3 app using Angular 4.4.4. Now, it’s time to upgrade the Angular 4 version to the latest Angular 5. Type this command to upgrade it at once after stopping running Ionic 3 app.

npm install ?save @angular/{cli,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser,platform-browser-dynamic}@next [email protected]'^5.5.2'
npm install ?save-dev [email protected]
npm install --save @angular/tsc-wrapped

Now, the dependencies change as below.

"dependencies": {
    "@angular/cli": "^1.5.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/tsc-wrapped": "^4.4.6",
    "@ionic-native/core": "4.3.2",
    "@ionic-native/splash-screen": "4.3.2",
    "@ionic-native/status-bar": "4.3.2",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.8.0",
    "ionicons": "3.0.0",
    "rxjs": "^5.5.2",
    "sw-toolbox": "3.6.0",
    "typescript": "^2.4.2",
    "zone.js": "0.8.18"
  },

To make sure upgrade process successful, run again Ionic 3 app.

ionic serve -l

You should see previous Ionic 3 default page after the default browser opened.


3. Create Ionic 3 - Angular 5 Service

To access or consume RESTful Web Service, we create Ionic 3 service to hold the related functions. Here we will implement the new Angular 5.0.0 HttpClient than bundle with Angular Common library. Type this command for creating Ionic 3 - Angular 5 service or provider, but first, close the running app by press `ctrl+c` key.

ionic g provider rest

That command generate provider or service file with the default imports like this.

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

Replace all imports with the Angular 5 `HttpClient` and new `rxjs` feature.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { map, catchError } from 'rxjs/operators';

Also, replace 'Http' injection in the constructor.

constructor(public http: HttpClient) {
  console.log('Hello RestProvider Provider');
}

Declare URL string variable below class name.

private apiUrl = 'https://restcountries.eu/rest/v2/all';

We will use free RESTful web service for getting countries. Now, create this function below the constructor.

getCountries(): Observable<{}> {
  return this.http.get(this.apiUrl).pipe(
    map(this.extractData),
    catchError(this.handleError)
  );
}

private extractData(res: Response) {
  let body = res;
  return body || { };
}

private handleError (error: Response | any) {
  let errMsg: string;
  if (error instanceof Response) {
    const err = error || '';
    errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
  } else {
    errMsg = error.message ? error.message : error.toString();
  }
  console.error(errMsg);
  return Observable.throw(errMsg);
}

 

4. Modify Existing Home Page

Now, it's a time to display country list on the Home page. First, we have to modify "src/pages/home/home.ts" replace all codes with this.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { RestProvider } from '../../providers/rest/rest';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  countries: any;
  errorMessage: string;

  constructor(public navCtrl: NavController, public rest: RestProvider) {

  }

  ionViewDidLoad() {
    this.getCountries();
  }

  getCountries() {
    this.rest.getCountries()
       .subscribe(
         countries => this.countries = countries,
         error =>  this.errorMessage = <any>error);
  }

}

Next, open and edit "src/pages/home/home.html" then replace all tags inside `<ionic-content>` tag with this.

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let c of countries">
      <ion-avatar item-left>
        <img src="{{c.flag}}">
      </ion-avatar>
      <h2>{{c.name}}</h2>
      <p>Capital: {{c.capital}}, Region: {{c.region}}</p>
    </ion-item>
  </ion-list>
</ion-content>


5. Run the App in the Browser and the Device

To test on the browser, run again this command.

ionic serve -l

You will see Ionic 3 and Angular 4 app on the browser show country list.

Ionic 3 and Angular 5 Mobile App Example - Ionic 3 Angular 5 Result

To test on Android or iOS device, first, update Cordova to the latest version.

sudo npm install -g cordova

Now, remove default generated platform.

ionic cordova platform rm android
ionic cordova platform add android
ionic cordova platform rm ios
ionic cordova platform add ios

To run on the Android.

ionic cordova run android

To run on the iOS device.

ionic cordova run ios

That it's, you can find the full explanation about new Angular 5 on this official Angular blog. If you need the working example, you can find the full source code on our GitHub.

That just the basic. If you need more deep learning about Ionic, Angular, and Typescript, you can find the following books:

Or take the following course:

Thanks!

The following resources might be useful for you:

Loading…