How to create native mobile apps from angular using Apache Cordova

This article will help you get started with creating native applications from your existing angular codebase (Example build an apk out of your angular code). To achieve this we will use Cordova that helps create mobile apps from Html, CSS & JavaScript so that we can target multiple platforms with the same codebase.

Photo by Azamat E on Unsplash

Dependencies

Before starting we need to install dependencies which are internally used by Cordova. I will be giving a brief on the installation part, for more information you can refer respective documentation if you face any installation issues.

• Node Package Manager (NPM): Required to install Cordova
• GIT: Used by Cordova behind the scenes
• Cordova: install globally using NPM, verify successful installation by checking the version.

npm install -g cordova
cordova --version

• Install Java: version should be 8 or above. Remember to set JAVA_HOME & add bin to path environment variable.

JAVA_HOME

Path

• Install Ant: http://ant.apache.org/bindownload.cgi
• Install Gradle
• Install Android SDK: Go to the following link https://developer.android.com/studio and scroll to “Command line tools”. Download appropriate zip based on your OS.
• Set the environment variables properly and test for successful installation by opening a new command window and checking for versions. (If you get issues like command not recognized it is probably due to incorrect environment paths)

Environment Variables

Path Variable

• Install build tools using below command: if you sdk root path issues refer next section. This is required to build Cordova app.

sdkmanager "build-tools;29.0.0"

How to resolve sdk_root issue

You can unzip Android SDK in any folder. I have created a folder called Android for this. On unzip you will get a folder named ‘cmdline-tools’, create a folder tools inside it and copy all contents of cmdline-tools to tools. Final content should be in the following path:

{folder in which you unzipped}\cmdline-tools\tools

In above path you should have bin, lib, source properties etc. For more reference check out below link

Android Command line tools sdkmanager always shows: Warning: Could not create settings

Setting up a Cordova Application

• Create Cordova Project: run below command to create new project.

cordova create nativeApp com.example.nativeApp NativeApp

• Add desired platform: It can be browser, IOS, Android etc. If you want to test on browser use browser platform instead of android (add browser instead of add android command)

cd nativeApp
cordova platform add android

• Run the Cordova application using below command: Note that you can either setup a default emulated android device or you can connect your android phone and enable USB debugging through phone settings. Cordova will automatically detect your device connected through USB and run your application there. (To run on browser replace android with browser)

cordova run android

• The above will run the default Cordova application on your selected platform. It takes the Html, CSS & JS from the www folder. Hence, whatever we want to serve (the build files) should be kept here.

Wrapping your angular app with Cordova

There are 2 ways to do this. First is to merge the Cordova and angular app by copying all files of Cordova project into your angular app directory. This is a bit complex and you also have to manually merge the package.json files.

The second and the easier/cleaner approach is to keep the Cordova app separate and use it to serve your dist folder.

• build your angular application: use relative base-href since Cordova doesn’t work well with absolute paths. You might need to serve with and without Cordova so better to add the option during build command instead of updating the index.html

ng build --prod --base-href .

• Copy the contents of your outputPath (generally dist/projectName) to www folder of you Cordova application. You can also setup scripts to automate the copy paste tasks. Now when you run using Cordova the angular application runs on your device natively.
• You can also create an apk using the below command

cordova build android

The apk gets created in platforms\android\app\build\outputs\apk\debug. you can install it directly in any android device and run it as an android application.

Conclusion

This should get you started with Apache Cordova. Although for complex production level scenarios some research may be required (example creating signed apks so that you can put your application in playstore) but you can proceed further on your own with given information. This is a very powerful way of using the same codebase across different platforms without having to rewrite your code for different platforms.