How to convert an Angular Web App into an Ionic App

Ashok Naik - Aug 21 '20 - - Dev Community

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

Alt Text

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

Alt Text

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

Alt Text

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
Alt Text

The last change in the index.html file <base href=”/”> to
<base href=”./”>
Alt Text

Now you can use the following command to create an Android apk
ionic cordova run android --project="my-fullstack-app"

Alt Text

Your Ionic App is ready 😎.

Alt Text

Special Thanks to my Broski Abhishek Shergar

That's all folks....

. . . . . . . . . . . . . . . . .