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-appto 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....
Top comments (21)
Thanks a lot for this simple tutorial.
When following the same command that you used I get this error :
Do you have an idea what could be the issue please ?
Thanks in advance
Hey!! Did you find a solution? tnks
Hello did you find a solution for this error?
Not yet unfortunately :(
try with npm i cordova-ios if u are using platform=ios and npm i cordova-android for platform=android
can you please give me the full command ?
When I type
npm i cordova-ios run ios --project="social-carpooling-frontend"it adds these packages :And when I type
ionic cordova run ios --project="social-carpooling-frontend"I get this error :First run
npm i cordova-iosand then
ionic cordova run ios --project="social-carpooling-frontend", if u have the same error try to remove node_modules and run:
npm i, also u can try before with:
ionic cordova prepare iosI am getting the same error :(
I am getting the same error :(
The scrolling is not working in the app. click action works but can't scroll down. Is there something I can do.
Try this in the index.html file ,overflow-scroll="true" this should work
overflow-scroll="true" is an ionic property how can we use it in index.html
Nicely done. Do we have solution to "Scrolling" issue?
just wrap base components in ion-content
Scrolling issue resolved
@waseemshaz I tried:
The scrolling is working now, but the fragments (#something) and there are some visual errors with the router.
Are we missing some steps @a_shokn ??
Hi Ashok,
I have follow above steps and APK installed successfully but in the device is showing blank screen with below error;can you please check and let me know how to fix it?
i am getting this error
[ERROR] Error while getting native targets for android: No valid Android SDK root found.
As the error message itself says "No valid Android SDK root found" can you check your environment variables and setup of the android SDK
Thanks for this post Ashok!
Amazing!!! Thank you