Beginners Guide For installation of ionic and building the android project in ionic for windows.

                                


I will walk through the complete setup of environment for the ionic which will help you even to build the project for android. Straight from installation of java to android-sdk to building the android project.

Steps:
1. Download java and java sdk.

2. Open command , type java if it is not recognized, you have to fix the environment variable.

3. Go to My Computer, open its properties,  go to advance system settings, open up the environment variables, add the new user variable call it PATH and add path to java sdk\bin
In my case: 

C:\Program Files (x86)\Java\jdk1.7.0_55\bin;

4. Download and install android sdk then add the android sdk platform-tools and tools to the path.
In my case:

 
C:\Program Files (x86)\Android\android-sdk\platform-tools;C:\Program Files(x86)\Android\android-sdk\tools;

5. Download and extract apache-ant binary and add it to the path
In my case:

 
C:\Program Files (x86)\apache-ant-1.9.6-bin\apache-ant-1.9.6\bin;

6. Install node.js, even if it exists, try installing new one cause npm issues normally gets fixed in the newer versions, so npm is automatically added to the path.

7. Finally you need to add system32 to the user variable path because some of the dependency required to build the android apparently requires it.
In my case:

 
 C:\Windows\System32

So, the whole path is like:

 
C:\Program Files (x86)\Java\jdk1.7.0_55\bin;C:\Program Files (x86)\Android\android-sdk\platform-tools;C:\Program Files (x86)\Android\android-sdk\tools;C:\Program Files (x86)\apache-ant-1.9.6-bin\apache-ant-1.9.6\bin;C:\Users\alex\AppData\Roaming\npm;C:\Users\alex\AppData\Roaming\npm;C:\Windows\System32



8. Install ionic and cordova:

npm install -g cordova ionic


-g in the command basically adds the ionic and cordova to the path. And, its done. The environment setup is complete.



9. To start a project with ionic. You have 3 templates readily available on ionic. One is blank, next is tab and the last one is sidemenu.

ionic start Nameyourproject sidemenu

10. Now go to the project directory and add the platform for android.

 
ionic platform add android

11. Finally, you can build the android project.

 
 ionic build android

12. You can view your project live in the browser.


ionic serve --lab





If you stumble upon any problem in following the steps, feel free to comment. I will be going through building a simple navigation project in the upcoming chapters which will be going through using native like features as camera capture, video capture, checking if the device is online or offline and so on.

Comments

  1. Sunil lamaDecember 28, 2015 at 9:03 PM

    Sharing my experience so that i can be notified about the problems i didn't stumble upon. Besides, helping is what i like to and am good at :)

    ReplyDelete
  2. UnknownDecember 28, 2015 at 9:07 PM

    Thank you so much for this, it helped me a lot.

    ReplyDelete
  3. UnknownFebruary 19, 2016 at 2:35 PM

    cant get ionic to setup and run because of the xmlbuilder error and have tried every possibilty of trying it but no luck:

    C:\Program Files (x86)\nodejs\node_modules>ionic start todo blank

    Error: Cannot find module 'xmlbuilder'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object. (C:\Users\armaan\AppData\Roaming\npm\node_modules\ionic\node_modules\xml2js\lib\xml2js.js:12:13)
    at Object. (C:\Users\armaan\AppData\Roaming\npm\node_modules\ionic\node_modules\xml2js\lib\xml2js.js:436:4)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)

    ReplyDelete
    Replies
    1. Sunil lamaFebruary 28, 2016 at 9:09 PM

      did you try reinstalling your node? what version is your node?

      Delete
    2. Sunil lamaFebruary 28, 2016 at 9:17 PM

      If you have installed ionic using npm install ionic -g then you can use node module from any directory, try starting app from any other directory rather than your root/../node_modules. And post your error log.

      Delete

Post a Comment

Popular posts from this blog

WebRTC video call with ionic, nodejs and twilio

Start with nodejs to have the foundation setup:  (*Note: This guide will work for those who have basic knowledge of ionic) Install the following which will be required in nodejs application npm install express npm install twilio npm install body-parser npm install cors // load all node modules var express = require( 'express' ); var app = express(); var cors=require( 'cors' ); var http = require( 'http' ); var path = require( 'path' ); var AccessToken = require( 'twilio' ).AccessToken; var ConversationsGrant = AccessToken.ConversationsGrant; var bodyParser = require( 'body-parser' ); var server = require( 'http' ).Server(app); // create and start express server server.listen( 5000 , function (){ // change 5000 to process.env.PORT if you are deploying to Heroku console.log( 'The chatroom is now live at port # ' + 5000 ); }); app.get( '/token' , function (request, response) {
Read more

Integration of Ionic with Visual Studio 2015

Image
                                          CHAPTER-2 The integration of ionic with Visual Studio 2015 requires you to have ionic project. You can either download the ionic zip projects or follow  chapter 1 of this series.   http://ionicsupport.blogspot.com/2015/12/beginners-guide-for-installation-of.html Step 1 :  Open your visual studio 2015 and create a new project, go to the javascript template → apache cordova, you will see tools for cordova, install it. Step 2 : Create a new project, go to the javascript template → apache cordova apps, you will see a blank app(Apache Cordova), create it. Step 3 : After creating it, copy the merges,  YourProjectName.jsproj(name it same to the ionic project) and taco.json file. Copy these 3 files and folders to the ionic project you created, run the YourProjectName.jsproj in vs2015. Step 4 : After saving all in visual studio, you will get .sln file  in your ionic project. That is all needed to in
Read more