A comprehensive Step by step tutorial of the brand new Angular 5 implementation with Ionic 3 to create Mobile App. We show you how to access REST API or Web Service in this Ionic 3 and Angular 5 mobile app tutorial. 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.

Table of Contents:

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:

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]



Ionic 3 Angular 5 Tutorial: Create a New Ionic 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.

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



Ionic 3 Angular 5 Tutorial: Upgrade Angular Dependencies

As you see in previous steps that generated the 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.

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 the upgrade process successful, run again Ionic 3 app.

ionic serve -l

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



Ionic 3 Angular 5 Tutorial: Create Ionic 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 generates 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 the 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); }

Don't forget to register `HttpClientModule` in `app.module.ts`. Open and edit `src/app/app.module.ts` then add this import.

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

Then add `HttpClientModule` to `@NgModule` imports.

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

Ionic 3 Angular 5 Tutorial: 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>



Ionic 3 Angular 5 Tutorial: Run the App in the Browser and the Device

To test in the browser, run again this command.

ionic serve -l

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

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

sudo npm install -g cordova

Now, remove the 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.

We know that building beautifully designed Ionic apps from scratch can be frustrating and very time-consuming. Check Ionic 4 - Full Starter App and save development and design time. Android, iOS, and PWA, 100+ Screens and Components, the most complete and advance Ionic Template.

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

Thanks!