Learn how to create android app using your existing or new angular project.

 

Before we start converting our application we need to install Cordova, Java SDK, Apache Ant, Gradle, and Android SDK for running our android application. If you have already done all the required setup you can skip this section. Or if you already running android studio on your machine then also you can skip this section because you already did that setup for your android studio you need to just install Cordova.

Installing Cordova:

1. You will need NPM(Node Package Manager) to install Cordova Package.                                                                     For Linux User:
   

$ sudo apt-get update
$ sudo apt-get install curl
$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
$ sudo apt-get install nodejs
$ nodejs -v
$ sudo apt-get install npm
$ npm -v

     For Windows User: 

Download from here.

2. You also need GIT, as it is used by Cordova behind the scenes.

For Linux User;

$ sudo apt-get install git
$ git --version

For Windows user:

Download from here.

3. Installing Cordova

$ sudo npm install -g cordova
$ cordova --version

Installing Java SDK:

You will need Java 8 (LTS version of Java) for running the latest version of Android SDK.

$ sudo apt-get install openjdk-8-jdk
$ java -version

Installing Ant:

Download Apache Ant zip file from here: ant.apache.org/bindownload.cgi then make a folder “ant” in your home directory and extract the downloaded zip file there.

Installing Gradle:

Apache Ant and Gradle are used behind the scenes by Cordova. You can simply install Gradle by entering

$ sudo apt-get install gradle

Installing Android SDK:

Go to the Android Studio website: https://developer.android.com/studio and scroll down till you see the “Command Line Tools” then download the appropriate zip for your OS. Make a folder “android” in your home directory and extract the zip file there.

Adding all the required Environment Paths:

After installing all the things you need to add their respective paths in the .bashrc file so that your application can access the required files throughout the system.

1. Open the .bashrc file by typing

$ sudo gedit ~/.bashrc

2. Then add the following installation paths at the end of your .bashrc file. These paths may vary depending on where you have installed the required things and the version that you have installed. So make sure to put the correct path to the installation directory.

export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64
export PATH=$PATH:/usr/lib/jvm/java-8-openjdk-amd64/binexport ANT_HOME=~/ant/apache-ant-1.10.7
export PATH=$PATH:~/ant/apache-ant-1.10.7/binexport ANDROID_SDK_ROOT=~/android/sdk-tools-linux
export PATH=$PATH:~/android/android-sdk-linux/tools/bin

3. After adding the paths save and exit the .bashrc file. The changes will be visible after you log-out and log-in again into the system, or you can enter the following command:

$ source ~/.bashrc

Creating new AVD (Android Virtual Device) for running our app:

1. View all packages

$ sdkmanager --list

2. Update installed packages

$ sdkmanager --update

3. Install build tools, required to build Cordova app

$ sdkmanager "build-tools;29.0.0"

4. Add any system image of your choice from the list of available packages

$ sdkmanager "system-images;android-28;google_apis_playstore;x86_64"

5. Create Android emulator

$ avdmanager create avd -n test -k "system-images;android-28;google_apis_playstore;x86_64" -g "google_apis_playstore"

6. List the created emulator

$ avdmanager list avd 

 

After all the setup is done we are finally ready to start converting our Angular application to a Cordova application. If you don’t have an existing Angular application go and create one (You can refer to this: https://angular.io/docs)

1. Navigate to your Angular project. For example purpose, I will be using a newly created Angular project.

2. Create a new Cordova project using

$ cordova create test com.example.test NewTest

3. Adding platform to the Cordova project. You can add a platform for IOS, Blackberry similarly.

$ cd test
$ cordova platform add android

4. Now we need to merge the Cordova project into the Angular project, so copy all the folders and files except for “package.json” and “package-lock.json” from the Cordova project to the Angular project.

5. Then you also need to merge the package.json of both the projects and the final package.json in the Angular project should look something like this.

6. Then open the “src/index.html” file and change the <base href=”/”> to <base href=”./”>

7. Then open the “angular.json” file and change the “outputPath” to “www”. So whenever you will build the Angular application the output will be generated in the “www” folder. It is necessary as Cordova will generate its output by using the files which are inside the “www” folder.

8. Then open the “tsconfig.json” file and change the “target” to “es5”. Then your app can work in newer versions of Android too.

9. Finally, you can build your Angular project and then convert the output to a mobile app using Cordova.

$ ng build --prod --aot
$ cordova emulate android

10. When you enter the above command an emulator will pop up, with the app installed on it which you can test.

Sample Output

Congratulations, you have successfully created your first Cordova application. Now that you have followed along with this long tutorial, I have written a bonus section that will help you debug some of the common problems and customize your app with Cordova Plugins. If you have any doubt you can ask in the comments section.