Making Angular project an Android app with Cordova

Apache Cordova is a mobile application development framework which allows you to create mobile app with simple javascript and html , but I will show how to wrap Angular project in Cordova,

Prerequisites

• Node Js.
• An Angular project to build the application.

Setup a Cordova project

Installing Cordova

npm install -g cordova

create project

cordova create yourAndroidApp

Your folder should look like this:

yourAndroidApp/
├── hooks/..
├── platforms/..
├── plugins/..
├── www/..
├── config.xml
└── package.json

Add Platforms

Once a Cordova project has been created, platforms can be added to the project. That will extend the support for additional platforms such as iOS, Android, etc.

Cordova platform add ios

Cordova platform add android

Wrap Angular project

Wrapping an Angular app with Cordova is as simple as building the Angular app and placing it in the www Cordova’s project folder.
I would advise keeping the Angular project and the Cordova project in two distinct folders to avoid mixing the respective node_modules folders and the project dependencies.

Just build your Angular project to Cordova’s www folder:

ng build --prod --base-href . --output-path ../yourAndroidApp/www/

Once Angular project build is compleated, open index.html file within www folder. And add cordova script to that html file.

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

Test on Android

cordova build android

cordova run android

Solving previous page redirect Angular binding issue

Cordova have some issues in triggering Angular functionality when device back button clicked. It will route to previous but Angular functionality like button-click, swipe-image etc will not work.

This issue should not appear after add this following code to index.html before cordova js script call.

<script>
      window.addEventListener = function () {
        EventTarget.prototype.addEventListener.apply(this, arguments);
      };
      window.removeEventListener = function () {
        EventTarget.prototype.removeEventListener.apply(this, arguments);
      };
      document.addEventListener = function () {
        EventTarget.prototype.addEventListener.apply(this, arguments);
      };
      document.removeEventListener = function () {
        EventTarget.prototype.removeEventListener.apply(this, arguments);
      };
</script>

Thank You.