For this article, we will create a small hybrid Android Ionic based mobile application from the perspective of Windows OS. It will cover, step by step, everything you need to do to create a working Ionic framework project. I will try to put as much information as I can, especially how to solve errors you will find along the way. I have tried/tested everything myself; attached images will be the proof.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Preparations

 
Before we start this tutorial, make sure you have everything installed/configured to handle Android development (Apache Ant, Java SDK and Eclipse/Android Studio). Download the listed software:
 
  • 1. Install Apache Ant
  • 2. Install nodeJS
  • 3. Install Ionic && Cordova
  • 4. Install Java JDK
  • 5. Install Android SDK
  • 6. Create, Test, and Delete a demo Ionic application
  • 7. Let’s create our own application
 

1. Install Apache Ant

 
Go to the official Apache Ant site and download latest version, or any other if you don’t like to use newer versions. Download link:
 
Download Link
 
Create a new ANT directory (where ever you prefer) and unpack a downloaded archive. It should look something like this: D:\JavaScript\ANT\apache-ant-1.9.2
 
Use this location and create a new environment variable called ANT_HOME, also use this variable and add it to your environment PATH like this: %ANT_HOME%\bin.
 
Ionic Tutorial 1014
 
Ionic Tutorial 1015
 

2. Install nodeJS

 
Before we can start with Ionic, make sure you have Node.js installed. Depending on your Windows platform (32 bit or 64 bit) select Windows Installer (.msi) and download it. During the installation you must remember instalation location. In this case it’s:
 
c:\Program Files\nodejs\
 
Download Link
 
It should look like this:
 
Ionic Tutorial 1001
 
Now go to the node.js installation folder (one I mentioned before) and go even deeper until you reach a bin folder:
 
C:\Program Files\nodejs\node_modules\npm\bin\
 
Copy this location and add it to your environment PATH. Take a look at this tutorial if you don’t know how to do that, you will find an examples for Windows XP, Windows 2000 and Windows 7. It should look like this:
 
Ionic Tutorial 1002
 

3. Install Ionic && Cordova

 
First part is optional. Before we install Ionic and Cordova using node.js we could change a default installation folder. Original default folder is strangely placed in this hidden location: C:\Users{username}\AppData\Roaming\npm. We can change this destination folder manually, just go to this folder: C:\Users\{username}\ and create an empty file called: .npmrc (make sure you have administration privilegies over that folder). Edit it and add this line (don’t forget to save):
 
prefix = "C:\\{your location}"
 
Remember you should use double \\ instead of a \. In this article we are using this location: prefix = “D:\\JavaScript\\nodejs”
 
This is the end of the optional part. Now let’s install Ionic and Cordova. Open Windows command prompt and enter this:
 
npm install -g cordova ionic
 
This will initiate an installation process, give it some time to finish (if you receive an error try again few times, npm sometimes can’t find needed packages). It should look like this:
 
D:\JavaScript>npm install -g cordova ionic
D:\JavaScript\nodejs\cordova -> D:\JavaScript\nodejs\node_modules\cordova\bin\cordova
D:\JavaScript\nodejs\ionic -> D:\JavaScript\nodejs\node_modules\ionic\bin\ionic
cordova@4.1.2 D:\JavaScript\nodejs\node_modules\cordova
├── underscore@1.7.0
├── q@1.0.1
├── nopt@3.0.1 (abbrev@1.0.5)
└── cordova-lib@4.1.2 (unorm@1.3.3, osenv@0.1.0, bplist-parser@0.0.6, properties-parser@0.2.3, mime@1.2.11, semver@2.0.1
1, dep-graph@1.1.0, shelljs@0.3.0, rc@0.5.2, npmconf@0.1.16, elementtree@0.1.5, xcode@0.6.7, glob@4.0.6, d8@0.4.4, tar@1
.0.2, request@2.47.0, plist@1.1.0, cordova-js@3.7.2, npm@1.3.4)

ionic@1.2.13 D:\JavaScript\nodejs\node_modules\ionic
├── connect-livereload@0.4.0
├── proxy-middleware@0.7.0
├── q@1.0.1
├── colors@0.6.2
├── progress@1.1.7
├── open@0.0.5
├── underscore@1.7.0
├── ncp@0.4.2
├── shelljs@0.2.6
├── cross-spawn@0.2.3 (lru-cache@2.5.0)
├── finalhandler@0.2.0 (escape-html@1.0.1, debug@2.0.0)
├── event-stream@3.0.20 (from@0.1.3, stream-combiner@0.0.4, duplexer@0.1.1, pause-stream@0.0.11, map-stream@0.0.5, split
@0.2.10, through@2.3.6)
├── optimist@0.6.0 (wordwrap@0.0.2, minimist@0.0.10)
├── form-data@0.1.4 (mime@1.2.11, async@0.9.0, combined-stream@0.0.7)
├── connect@3.1.1 (parseurl@1.3.0, utils-merge@1.0.0, debug@1.0.4, finalhandler@0.1.0)
├── serve-static@1.7.1 (utils-merge@1.0.0, parseurl@1.3.0, escape-html@1.0.1, send@0.10.1)
├── tiny-lr-fork@0.0.5 (debug@0.7.4, qs@0.5.6, faye-websocket@0.4.4, noptify@0.0.3)
├── unzip@0.1.9 (setimmediate@1.0.2, match-stream@0.0.2, readable-stream@1.0.33, pullstream@0.4.1, binary@0.3.0, fstream
@0.1.31)
├── request@2.27.0 (forever-agent@0.5.2, aws-sign@0.3.0, tunnel-agent@0.3.0, qs@0.6.6, json-stringify-safe@5.0.0, oauth-
sign@0.3.0, cookie-jar@0.3.0, mime@1.2.11, node-uuid@1.4.2, hawk@1.0.0, http-signature@0.10.0)
├── vinyl-fs@0.3.7 (graceful-fs@3.0.5, lodash@2.4.1, strip-bom@1.0.0, vinyl@0.4.6, mkdirp@0.5.0, through2@0.6.3, glob-st
ream@3.1.18, glob-watcher@0.0.6)
├── prompt@0.2.12 (revalidator@0.1.8, pkginfo@0.3.0, read@1.0.5, utile@0.2.1, winston@0.6.2)
├── archiver@0.5.1 (lodash@2.4.1, readable-stream@1.1.13, lazystream@0.1.0, zip-stream@0.1.4, file-utils@0.1.5)
├── gulp@3.8.8 (pretty-hrtime@0.2.2, interpret@0.3.9, deprecated@0.0.1, archy@0.0.2, minimist@1.1.0, tildify@1.0.0, semv
er@3.0.1, chalk@0.5.1, orchestrator@0.3.7, gulp-util@3.0.1, liftoff@0.12.1)
├── xml2js@0.4.4 (sax@0.6.1, xmlbuilder@2.4.5)
└── npm@2.1.3

D:\JavaScript>
 
I am adding text instead of an image to prevent unnecessary article loading time. Close this command prompt window, we will update our environment PATH soon.
 
Before we proceed any further we need to add Cordova bin directory to our environment PATH. Go to your node.js module directory (one we previously created, in this case it is: D:\JavaScript\nodejs\). Go even deeper until you reach this directory:
 
D:\JavaScript\nodejs\node_modules\cordova\bin\
 
or in your case:
 
C:\{your location}\node_modules\cordova\bin\
 
Copy that location and add it to your environment PATH like, like this:
 
Ionic Tutorial 1003
 
Do the same thing for {your location} directory, go to your node.js module directory (one we previously created, in this case it is: D:\JavaScript\nodejs\).:
 
D:\JavaScript\nodejs\
 
or in your case:
 
C:\{your location}\
 
Copy that location and add it to your environment PATH like, like this:
 
Ionic Tutorial 1010
 

4. Install Java JDK

 
Go to the official Oracle Java site and download latest Java JDK version, be careful not to download Java JRE instead. You will also need to create an official Oracle account. Be careful to install a correct 32bit or 64 bit version (this tutorial will show you how to find this information). Download link:
 
Java JDK
 
Install it where ever you want, just remember its location. For example, it should look like this: C:\Program Files\Java\jdk1.8.0_25\
 
Create a new environment variable (into System variables) called JAVA_HOME and add a location to your JAVA installation folder. Then add it to the environment PATH, looking like this: C:\Program Files\Java\jdk1.8.0_25\bin:
 
Ionic Tutorial 1004
 
Ionic Tutorial 1005
 

5. Install Android SDK

 
Go to the official Android SDK site:
 
Android SDK
 
You can choose “Download Android Studio” if you wish a full package or you can scroll a bit until you see: Other Download Options -> SDK Tools Only. Here you can download SDK only, just select Windows installer package and initiate download/installation. In this case will we download full Android Studio. Start SDK Android Studio installation.
 
At this point, just click Next until installation ends if you wish you can change installation folder.
 
Go to Android Studio installation folder, like this one: C:\Program Files\Android\Android Studio\bin\ and create a desktop shortcut (if you are using 32bit Windows use studio.exe or studio64.exe in case of 64bit Windows). Do this step only if installation didn’t do that automatically.
 
Open Android Studio (this part will fail if you don’t have installed JAVA SDK also it will take some time for it to open for the first time, ). Click Create New Project, and click Next several times. When Android Studio opens, go to toolbar and click Tools -> Android -> SDK Manager. When you open the SDK Manager for the first time, several packages are selected by default. Leave these selected, but be sure you have everything you need to get started by following these steps (don’t select Android 3.X or anything lower than 2.3.3 because Cordova don’t support them).
 
Ionic Tutorial 1006
 
Once you’ve selected all the desired packages, continue to install, click Install X packages. In the next window, double-click each package name on the left to accept the license agreement for each. Click Install. The download progress is shown at the bottom of the SDK Manager window. Do not exit the SDK Manager or it will cancel the download. You will probably need to do this 3-4x times (some sections have dependencies and installer is not smart enough to install then in the right order).
 
Ionic Tutorial 1007
 
This will take a lot of time so make yourself a coffee while you wait.
 
Ionic Tutorial 1006
 
When everything is done, your Android SDK should be installed somewhere like this:
 
C:\Users\Gajotres\AppData\Local\Android\sdk
 
in your case, it will be:
 
C:\Users\{USER}\AppData\Local\Android\sdk
 
Create new environment variable called ANDROID_HOME and add previously mentioned link. Now add two additional environment PATH locations %ANDROID_HOME%\platform-tools; and %ANDROID_HOME%\tools;. Everything should look like this:
 
Ionic Tutorial 1011
 
Ionic Tutorial 1012
 
Ionic Tutorial 1013
 
Continue Reading

  • Nikola

    Can you please explain what do you mean by NATIVE mobile app ? How native is an app build with cordova/ionic ?

    • It all depends on a context, hybrid mobile application is still packaged as a native mobile application. I could have used word “Hybrid” instead of a “Native” unfortunately, a lot of people still don’t understand a definition of hybrid mobile app.

  • arjay

    hi @DraqanGaic Thanks for this step by step setup environment. i encountered an error when i run this part
    ionic platform add android
    ERROR Current working directory is not a Cordova-based project

    • At what point did this error ocured?

      • arjay

        when i adding the android platform to test the demo of ionic, my cordova and ionic installed in my C:/itools but somehow i notice have a cordova and ionic folder created in C:\Users\Arjays\AppData\Roaming\npm\node_modules,i try to create another one by running cordova create in a folder empty.what should i do to make this running?

        • Have you changed destination folder in this file: .npmrc

          This part is described in the chapter: Install Ionic && Cordova

  • B H

    Hi,

    I followed all of the instructions as above and have gotten no errors until I call the command “ionic emulate android”. This starts up my emulator, however cmd throws an error saying the below as well as my app is not installed in the emulator. (This is what I am assuming the error message is telling me.)

    c:\Users\[username]\Documents\Development\learn_ionic\newApp\platforms\android\cordova\node_modules\q\q.js:126
    throw e;

    Failed to launch app on emulator: Failed to install apk to emulator: Error : Could not find apk architecture: arm build-type: debug

    I appreciate any help in advance.

    Thank you,
    B

    • Malek

      had exactly the same ERROR !! please help!!

      • I would like to help you but it's a mission imposible without knowing what bave you done prior to this error.

        This is a rare error so I would guess you have some kind of version missmatch. For example Cordova not working correctly with your current Nose.JS version.

        1. First what Node.JS version are you using?
        2. Have you just clicked Install button (on node.js page) or have you downloaded appropriate 32 or 64 bit version? Cordova and Ionic need to have some stability.
        3. Are you using a new setup or an old one?
        4. If you're using an old setup have you tried updating cordova, ionic?

        npm update -g cordova
        cordova platform update ios
        cordova platform update android
        5. Have you tried to install older cordova version?

        npm view cordova versions
        npm install -g cordova@<version>
        6. Have you connected your device or are you testing it on an emulator? Try using a real device
        7. If you don't have a real device try using an alternative emulator: Genymotion
        When running your app use this:
        ionic run android
        instead of this:
        ionic emulate android
        8. Worst case scenario, deinstall everything and install again but this time 3-4 month older versions. And u se Genymotion as your ''real'' device.

        Please tell me if anything here helped you to solve this problem.

  • Malek

    thanks a lot for your prompt reply.

    1. the version of node.js is v0.12.1
    2. yes i have downloaded appropriate 64 bit version?
    3. New setup
    4. Did those steps:
    npm update -g cordova
    cordova platform update ios
    cordova platform update android

    5. Yes I have tried to install older cordova version?

    I did
    npm view cordova versions
    npm install -g cordova@4.0.0

    6. Connected to my device

    8.O will de-install and install everything
    Thanks

    • Did anything do the trick? Or shell we try few other things.

      • Malek

        Unfortunately it didn't work.
        after re-installing I have this error

        C:\ionic\todo\platforms\android\cordova\node_modules\q\q.js:126
        throw e;
        ^
        Error: Could not find apk architecture: arm build-type: debug
        at Object.module.exports.findBestApkForArchitecture (C:\ionic\todo\platforms
        \android\cordova\lib\build.js:466:11)
        at C:\ionic\todo\platforms\android\cordova\lib\device.js:99:30
        at _fulfilled (C:\ionic\todo\platforms\android\cordova\node_modules\q\q.js:7
        98:54)
        at self.promiseDispatch.done (C:\ionic\todo\platforms\android\cordova\node_m
        odules\q\q.js:827:30)
        at Promise.promise.promiseDispatch (C:\ionic\todo\platforms\android\cordova\
        node_modules\q\q.js:760:13)
        at C:\ionic\todo\platforms\android\cordova\node_modules\q\q.js:526:49
        at flush (C:\ionic\todo\platforms\android\cordova\node_modules\q\q.js:108:17
        )
        at process._tickCallback (node.js:355:11)

        Again thanks a lot

        • 1. From what I can see you're using Windows OS, tell me what version?
          2. Have you tried to test it on a virtual device (created through AVD manager)?
          3. If you're using a real device can you tell me which model?
          4. Have you tried to manually install apk on your smartphone?

  • Malek

    1-
    >ionic info
    Your system information:

    OS: Windows 8.1
    Node Version: v0.12.1
    Cordova CLI: 4.3.0
    Ionic Version: 1.0.0-beta.14
    Ionic CLI Version: 1.3.18

    2- no
    3-version device :
    smasung galaxy express 2
    >adb devices -l
    List of devices attached
    device product:wilcoxltexx model:SM_G3815 device:wilcoxlt

    4- no , I have to do it ? if yes do mind telling me how ?

    • 4. Go to your Android Studio project folder and look if you can find any apk file. (*.apk)

      If you can't find it then there's a problem with AndroidSDK.

  • Malek

    I think there is a bug
    they are writing in function module.exports.findBestApkForArchitecture (build.js)
    throw new Error('Could not find apk architecture: ' + arch + ' build-type: ' + buildResults.buildType);

    I commented it and now have

    ERROR: Failed to launch application on device: ERROR: Failed to install apk to device: Error executing "adb -s 09127f0e install -r "undefined"": Missing APK file

  • Malek

    oh my god ! it is working now!
    I am running the cms node.js as administrator and I killed my comodo internet security

    THANK you so much for your help

    • Congratulation, you should be proud. So firewall was a problem?

  • anan

    Hi,

    I have set it up all environment as per your instructions. EverythING is fine bit when I try to do "ionic build android" ..getting error after -package resource. Ant\Build.xml 962 line. Ant-build\classes.dex does not exit.

    Can you help me.

    • You probably have a problem with Ant installation. I never so this error and there's only one google post related to it.

  • CarrotRol

    while creating a demo name IonicDemo receive lots of errors,but at the end the console print Your Ionic project is ready to go!

    blow this is the errors log:

    npm http GET http://registry.cordova.io/org.apache.cordova.device
    npm http 200 http://registry.cordova.io/org.apache.cordova.device
    npm http GET http://cordova.iriscouch.com/registry/_design/app/_rewrite/org.apac
    he.cordova.device/-/org.apache.cordova.device-0.3.0.tgz
    npm http 200 http://cordova.iriscouch.com/registry/_design/app/_rewrite/org.apac
    he.cordova.device/-/org.apache.cordova.device-0.3.0.tgz

    npm http GET http://registry.cordova.io/org.apache.cordova.console
    npm http 200 http://registry.cordova.io/org.apache.cordova.console
    npm http GET http://cordova.iriscouch.com/registry/_design/app/_rewrite/org.apac
    he.cordova.console/-/org.apache.cordova.console-0.2.13.tgz
    npm http 200 http://cordova.iriscouch.com/registry/_design/app/_rewrite/org.apac
    he.cordova.console/-/org.apache.cordova.console-0.2.13.tgz

    npm http GET http://registry.cordova.io/com.ionic.keyboard
    npm http 200 http://registry.cordova.io/com.ionic.keyboard
    npm http GET http://cordova.iriscouch.com/registry/_design/app/_rewrite/com.ioni
    c.keyboard/-/com.ionic.keyboard-1.0.4.tgz
    npm http 200 http://cordova.iriscouch.com/registry/_design/app/_rewrite/com.ioni
    c.keyboard/-/com.ionic.keyboard-1.0.4.tgz

    • None of these are errors.

      • CarrotRol

        thanks for your response , now i receive another error when cmd “ionic build android”,and i have installed ANT of first step,hope your help.

        sometime the error log is :

        ERROR building one of the platforms: Error: C:\Users\Administrator\IonicDemo\pla
        tforms\android\cordova\build.bat: Command failed with exit code 2
        You may not have the required environment or OS to build this project
        Error: C:\Users\Administrator\IonicDemo\platforms\android\cordova\build.bat: Com
        mand failed with exit code 2
        at ChildProcess.whenDone (C:\Users\Administrator\AppData\Roaming\npm\node_mo
        dules\cordova\node_modules\cordova-lib\src\cordova\superspawn.js:131:23)
        at ChildProcess.emit (events.js:98:17)
        at maybeClose (child_process.js:766:16)
        at Process.ChildProcess._handle.onexit (child_process.js:833:5)

        if i cmd “ionic build android” again,the error log may be like this:

        ERROR building one of the platforms: Error: C:\Users\Administrator\IonicDemo\pla
        tforms\android\cordova\build.bat: Command failed with exit code 2
        You may not have the required environment or OS to build this project

        • You need to recheck configured environment variables and check if they’re pointing to correct folders.

          Open command line and type these:

          echo ANDROID_SDK
          echo ANDROID_NDK
          echo ANDROID_HOME
          echo ANDROID_PLATFORM_TOOLS
          echo JAVA_HOME
          echo PATH

          • CarrotRol

            ~~~thanks a lot,got it solved. something wrong with jdk path.

  • Rakesh N S

    Please help…
    My environmental variables are set correctly.Still I am getting same error…I am unable to build Cordova project.
    Error:cmd:Command failed with exit code 1
    Error:building one of the platforms.You may not have required environment or OS to build this project.

    • This usually means your environment is not set properly. For what platform are you creating your application?

  • daniyal ghani

    Can Cordova and Ionic work on Windows XP because Iam having Windows XP on my PC
    please help me

    • Unfortunately, I don’t know nor I have a way to test that.

  • Marshallvatian

    i have problem here,,there is no output sound when i click the play button. It just like when i click html link without same address. it not do anything.

  • Nadun De Silva

    I have added the ANT_HOME environment variable and have also added the bin folder to PATH. I have windows 10 and I am using all your steps but when I enter “ionic build android” nothing happens. I just get a blank line and no output or anything. I can’t find the build folder in “%path%platformsandroid” either

    • Use some program that can search hidden files and folders and look for a platformsandroid folder. I’m using Total Commander.

      • Nadun De Silva

        No… What I meant was that I can find platformandroid folder… But inside that I cannot find the build folder… I’m new to ionic and I thought that after running the build command there should be a build folder inside which I can find the apk file :/

        • Why don’t you google this problem? It’s a common one:

          http://stackoverflow.com/questions/26155104/ionic-build-android-not-working

          • Nadun De Silva

            Actually I had been googling for hours without much luck… I did try whats in that stack overflow question as well… But still no luck. But thanks anyway 🙂 This site helped me get this far 🙂

          • Nadun De Silva

            Hey, as it turned out it was something wrong with node.js v5 I downgraded to v4.14.7… works fine now…

      • Nadun De Silva

        And I don’t get any errors either :/

      • Nadun De Silva

        Here’s a screenshot of what happens when I add the platform and run the build command

  • Raul_Souza

    C:ionic>ionic start myDemoApp tabs

    C:UsersRaulMichelleAppDataRoamingnpmnode_moduleshawknode_modulesboomlibindex.js:5

    const Hoek = require(‘hoek’);

    ^^^^^

    SyntaxError: Use of const in strict mode.

    at Module._compile (module.js:439:25)

    at Object.Module._extensions..js (module.js:474:10)

    at Module.load (module.js:356:32)

    at Function.Module._load (module.js:312:12)

    at Module.require (module.js:364:17)

    at require (module.js:380:17)

    at Object. (C:UsersRaulMichelleAppDataRoamingnpmnode_moduleshawklibindex.js:5:33)

    at Module._compile (module.js:456:26)

    at Object.Module._extensions..js (module.js:474:10)

    at Module.load (module.js:356:32)

    Use of const in strict mode. (CLI v1.7.14)

    Your system information:

    Cordova CLI: Not installed

    Ionic CLI Version: 1.7.14

    Ionic App Lib Version: 0.7.0

    OS: Windows 8

    Node Version: v0.10.26

  • vijay

    How to solve this error………….!

  • vijay

    How to solve this

  • Destiawan YukiKaze

    can you help me please!

    • Destiawan YukiKaze

      this screen