CONVERT YOUR ANGULAR (v7 updated) PROJECT TO MOBILE APP USING CORDOVA

A client needed a tasking app and due to my love for Web App, we decided to build the app using Angular 4, I derived job and satisfaction achieving the task with Angular (you should understand that feeling, smiles).

Fast forward to the date of delivery, only to hear from your client “PLEASE I NEED A MOBILE/ANDROID APP”.

In my mind “Does this client really know what he’s talking about?” — I thought. I don’t have anything to say, if not to say “ALRIGHT SIR, PLEASE WOULD YOU GIVE US TWO WEEKS TO DELIVER?

Alright, that short story made me go researching and finding the fastest route to achieving the task. I don’t need to beginning migrating to either Ionic or any other framework.

REQUIREMENTS

  1. You must have installed your Cordova CLI, if not, refer to Cordova Getting Started and Documentation on how to achieve that.

STEPS (Advise: Ensure you have a backup before executing this steps)

  1. Create a new Cordova Project, using the cordova below:

cordova create hello com.example.hello HelloWorld

2. Add your Cordova Building Platform:

cordova platform add [platform]

Where platform can be either Android, Blackberry or IOS

3. Merge your Angular project with the Cordova project created by copying every folders and files, except your package.json file from your Cordova project root directory to the Angular project root directory.

4. Carefully open the package.json file in the both directories and carefully merge the two files into one (in the angular project). The resulting package.json should look like below:

A screenshot of how your package.json should look after merging

5. Development project folder is src/. You should start testing/building your Angular 4 app there!

6. Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

With the steps above, you have successfully merged and converted your Angular Project to Mobile App. To implement the Cordova plugin, add reference to cordova.js in angular project html file (src/index.html).

<script type=”text/javascript” src=”cordova.js”></script>

Note that adding the reference to cordova.js will throw/display an error when you try to test on local server.

Add Cordova Device plugin or any other plugin you’re interested in using with the command below:

cordova plugin add cordova-plugin-device

We are almost done, now let’s use cordova to get the Device information.

In your angular project, import and implement OnInit and added the plugin callback function as follow.

import { Component , OnInit} from ‘@angular/core’;

….

….

export class AppComponent implements OnInit{
ngOnInit() {
document.addEventListener(“deviceready”, function() {
alert(device.platform);
}, false);
}
}

Typescript will not recognize the ‘device.platform’ statement and warns cannot find device

To resolve this issue, add the line below immediately after the import line

declare var device;

That’s all.

Finally is to build our project.

BUILDING AND RUNNING OUR APP

  1. Update the <base href=“/”> tag in your src/index.html to <base href=“./”>, this will enable angular to access files in a directory path since we are not hosting on a server.

cordova build android|ios|[platform]

OUTPUT

On successful launching on a device, the app should display an alert box having “Android” (in my own case).

Project demo can be found on github: https://github.com/nacojohn/AngularToMobileProject

Congratulation! You can now go ahead to implement other cordova plugins to your app.

Worked for you? Then, press and hold the clap button. Also don’t forget to buy me a coffee and tweet, you might be helping others.

Feel free to comment for any error encountered while executing the step OR ones identified.

Thanks.

A Web Developer, Angular lover, Tech Evangelist, Tech coach for Beginners. TechPassionate, GDG Aba Lead