Ionic framework is one of the popular development environment for mobile applications. Ionic is popular because of its open source mobile UI toolkit for developing rich cross-platform mobile applications. Cross platform meaning, apps developed using Ionic with single codebase can be executed from iOS(iPhones, iPad), Android and webserver(desktop Applications). It uses technologies like HTML, CSS, Javascript, NodeJS, To start with your first Ionic Application, you need to install Ionic framework. This post describes about installation of Ionic and its required components, running first Ionic application and how to run android application in ionic framework.

Installation

Follow below steps for Ionic framework installation. Assuming you are using fresh Ubuntu system and ‘npm’ is not installed on system, first install ‘npm’ – node package manager for javascript.

$sudo apt-get install npm 

This will install ‘npm’ package. Now download and install Ionic framework on your Ubuntu machine.

$sudo npm install -g ionic
$ionic -v 
5.2.5

We will need node.js, installation step for nodejs is as follows

$sudo apt-get install nodejs

Now install cordova- Apache Cordova is a mobile application development framework and runs on node.js

$sudo npm install -g cordova

Hello Ionic

For creating your first Ionic application follow below steps.

ionic start myapp tabs      #for creating tabs application
ionic start myapp blank     #for creating blank application
ionic start myapp slidemenu #for creating slidemenu application

Now navigate to ‘myapp’ directory and publish your first ionic application. It is as simple as that but for the first time you might encounter following errors – ‘ng run app:serve –host=localhost –port=8100 [ng] An unhandled exception occurred: Could not find module “@angular-devkit/build-angular” from “/home/hello/hello”. [ng] See “/tmp/ng-SmeTji/angular-errors.log” for further details.’

If you get so just un-install and re-install Ionic framework with above mentioned steps.

Now publish application on web-browser

$ionic serve

• 

Run Android Application in Ionic Framework

While there advantages of using Ionic framework over android SDK, but lets not go there and stick to Ionic framework for the simplicity of this post :-).

First step is we need to add platform to the application ie in ‘myapp’ folder execute following command to add android platform

$ionic cordova  platform add android

ionic cordova run android
[ERROR] Sorry! ionic cordova run can only be run in an Ionic project directory.

If this is a project you'd like to integrate with Ionic, run ionic init.

$ionic init

Then build application and execute it 
$ionic cordova build android
$ionic cordova run android
or 
$ionic cordova emulate android

ng run app:ionic-cordova-build –platform=android An unhandled exception occurred: EACCES: permission denied, unlink ‘/home/myapp/www/0-es2015.js’ See “/tmp/ng-QTKII3/angular-errors.log” for further details. [ERROR] An error occurred while running subprocess ng. ng run app:ionic-cordova-build –platform=android exited with exit code 127. Re-running this command with the –verbose flag may provide more information.

These are first time errors and occurred because we have not sent $PATH.

Adding SDK,JDK and Gradle path in ionic project

1. export ANDROID_HOME=/home/Android/Sdk

2. export JAVA_HOME=/home/android-studio-ide-182.5264788-linux/android-studio/jre export

3. export GRADLE_HOME=”/home/gradle/gradle-5.5.1/bin”

4. export PATH=”$PATH:$ANDROID_HOME:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$GRADLE_HOME”

5. echo $ANDROID_HOME

6. echo $JAVA_HOME

7. echo $PATH

With this now you can execute android application in Ionic Framework.