How to convert angular app to android app

Convert your angular website into a hybrid mobile application (Android, iOS and Windows) without writing a single line of code in JAVA, Swift, C#, etc.  I'm not wasting time here by explaining the pros and cons of the angular or any other framework or programming languages, every framework and programing language has both benefits and drawbacks. It is a Universal truth that angular is a famous frontend technology, I'm also using this amazing technology for many years. I have build many applications using angular. It is supper easy as compared to VueJs and even ReactJs as it isolates the HTML, CSS, and JavaScript of each component. I think it's enough we talked about the angular in this post as the agenda of this post is not the Angular. So, let's start the actual work here to convert the existing angular application into an Android app (Hybrid) within a few simple steps.

 

1. Install Cordova
If it's new for you, then you can simply run this command to install Cordova: 'npm install -g cordova'

 

2. Intall Android Studio
Android studio help us to run the app in the emulator provided by Android Studio 

 

3.  Create an empty Cordova project as below:
'cordova create my-app com.my-app.hello MyApp'

 

4. Build your angular project
Now make a production build of your existing angular application, if you don't have already a project you can create an angular app.

 

5. Add the Android platform to your Cordova app
You need to add the required platforms like Android, iOS, Windows, etc in the newly created Cordova project. The following command can be used to add a platform:
"cordova platform add android | ios | windows". Whatever platform you want to add, just write that with add platform command.

6. Merge Cordova and Angular files
We need to merge both the apps file (Angular and Cordova). Except, node_modules, package.lock, package-lock.json files copy all the other files and past them into Angular project directory.

Merge cordova's package.json with angular's package.json file.

 

7. Update index file base URL tag as below:
Change
<base href=”/”> 

to:
<base href=”./”> 
just add a dot(.) before the '/' in the index.html page.

 

8. Update the Angular.json file.
in Angular.json file we have the output path is set to 'dist' change this to www as :
outputPath = www.

Run the following commands carefully:
"ng build --prod --aot"
"cordova build android"


Your Hybrid mobile application is ready to run in the emulator as well as on real devices. To test in the emulator, run this command: "cordova emulate android"

Please note that the command "cordova build android" will generate an app for debugging/testing purposes only. For the production build, you need to generate a released and signed version application by configuring the app certificate/signature.

Generate Released Version
Run this command to generate the released version of your application: "cordova build --release android".
The generate released version of APK will be saved in the following path:
"platforms/android/app/build/outputs/apk/release."

Keystore
You can generate the Keystore  to make your app signed with the following command:
"keytool -genkey -v -keystore mymobileapplicatoin.keystore -alias androidmobileApp -keyalg RSA -keysize 2048 -validity 10000"

 

The above command will ask you to enter a few basic information like password, organization info, etc. Just enter your info and hit enter. Please note down all the information you entered here to generate the Keystore file. These will be needed while uploading your app in the play store. 

There are multiple ways to make your app signed from the unsigned version, even you can directly generate a signed version from the build command by providing the necessary (Keystore information)

That is it. All done. We have a Mobile App without writing a single line of Java for android. The same goes for the others platforms as well.