There are scenarios/requirements in Web development when you need to create an Android app of existing Web Applications.
For Example: if you have an online eCommerce website you might need an android/ios native app as well.
This Blog Post provides a simple solution to overcome the challenge by converting an Angular Web App into an Ionic Mobile App.
Ionic Framework is an open-source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like Angular and React.
The first step in the process is to create a new Angular project using the CLI ng new my-fullstack-app
Moving into the project directory cd my-fullstack-app/
The second step includes adding Ionic to your newly created angular project which can be done using the following command
ng add @ionic/angular
Once you have successfully added ionic to your project the third and most important step is to initialize your ionic project which can be done using the following command ionic init
Note: Your Ionic project name should be the same as your angular project name. In my case, I have given the same name
my-fullstack-app
to both projects
Before creating an android build we need to make some necessary changes like changing the output path from dist to www in the angular.json
file
The last change in the index.html file <base href=”/”>
to
<base href=”./”>
Now you can use the following command to create an Android apk
ionic cordova run android --project="my-fullstack-app"
Your Ionic App is ready 😎.
Special Thanks to my Broski Abhishek Shergar
That's all folks....