In this article, I am going to show you how to create an android APP from angular using Angular2+ using Cordova.

step 1

first, create an angular app

ng new android-tutorial

then your project look like this

Step 2

install Android Studio : (https://developer.android.com/studio)

Step 3

install Cordova plugin using npm

npm install -g cordova

Step 4

Creates a new Cordova project

cordova create hello-app-world-cordova com.example.hello OurFirstApp

the Cordova project look like above

Step 5

Add the target platform to your mobile app in the newly created Cordova project.

cordova platform add android

Step 6

copy all the folder and files except package.json,  package-lock.json and node_modules , from Cordova project to your angular project. result folder structure photo will look like below

Step 7

merge Cordova project package.json to angular project package.json:

• Overwrites the name of the Angular package.json with the name of the Cordova package.json.
• You do not have to copy the script object of the Cordova package.json into the Angular package.json.

the resulting package.json file looks like below

Ps: Notice that we make change on the bottom file . we have added new dev-dependencies from cordova plugin.

Step 8

Opens the index.html of the Angular project and changes the base href from <base href = ”/”> to:

<base href=”./”>

move or copy the meta & script Tag, from www/index.html content to src/index.html. 

Now your src/index.html look like this

Step 9

now in angular.json change “outputPath”: “dist/android-tutorial” to “outputPath”: “www”, because Cordova need build here

Step 10

Generate production build

ng build --prod

Step 11

www/index.html file look like this and copy the js/index.js folder from cordava/www project to angular www/

PS: and do not forgetto add type=”text/javascript” to all script tag otherwise you will get file:/// null cross error something

Step 12

Let us build android apk from www folder content. To do so , first make sure you installed android studio, and java kit development (jdk8) to 1.8 version.

Then set corresponding environment variables: JAVA , ANDROID_HOME , tools and platform-tool in your system env files ~/.profile or ~/.bashrc

Let us build android apk from www folder content, to do so run below command

cordova build android

If you work with an Angular Version over 8, you still have to change the Compile Target to es5 (ES5) in tsconfig.json.

"target": "es5"

(Because Angular over version 8 compiled by default for ES6 (es2015), but Android emulators have problems with ES6)

Step 13

Now your APK is ready for testing. However, we need a running virtual Android device. To do this, open Android Studio. Now open the Android Virtual Device Manager. Create a new virtual device (hardware and Android version as you like) and start the device. As soon as the virtual device has booted, you can start the test APK in the Angular directory.

cordova emulate android

That's it. Now your Angular project should start as an app on the virtual device.

Conclusion

I showed you the simple steps to create an (unsigned) android app from angular. To publish to playstore, we have to generate the signed apk.

We can build an ios app using Cordova build ios.

Next: how to create signed-app