Tips and Hints on
Posted on May 16th, 2014 by Fernando Zamora
I decided to record my experience since I will probably be the main one coming back to it when I decide to create my hybrid app.
The ionic website describes these 3 easy steps
1. Install Ionic
2. Star a project
3. Run it
Each of those steps alone is easy. Each one of them simply requires running a command on the command prompt. Easy enough right? Wrong! First off I ran into my first problem installing Ionic. There was an error that said that one of my dependencies was not the correct one. After some web searching, I found that the answer was to clear my cache by running the command
npm cache clear
. That took that first error out but then I got another one. Some more google searching indicated that I probably needed to update my node version. So off I went to download and install the latest version of Node. Once I did that, more errors. So off I went to update the node package manager. Once I finally got that done I was ready for step two. Yes you read right that was only step one.
Step two indicates to start a project. I ran the command for step two and ran into more issues. The ant command was not recognized. ant?!! I don’t have ant installed. So off I went and downloaded ant. I had to add the ant bin directory to my path environment variable, which means that I had to shut down the command prompt and restart it (always remember to shutdown and open a new command prompt after modifying your path variable, otherwise you will be scratching your head as to why the command is not recognized). Once I did that it cleared the ant problem but I ran into some more module issues. Some incompatibilities of sorts. I was getting an error with the suggestion that my cordova was probably out of date. So I went and updated that with NPM. After all that I was ready for step 3.
At step 3 I ran into some more issues. Apparently I could not build or emulate android because I did not have the required Android SDKs (version 19 as of this writing). I will give cordova credit because it even gave a suggestion on how to get those. Ooh did I say cordova, yes I mean cordova. At some point one the links recommended to use cordova since ionice could actually be hiding the issues. That is by simply running the android command from the command line. Once I did that, the android SDK manager opened up in a window and I was able to select the recommended packages. That actually took a while. Even after installing android SDK I still was having problems with step 3. Apparently you have to manually add the path to the SDK tools (C:\Program Files (x86)\Android\android-sdk\platform-tools on my box) to the path environment variable. Once I got past all that, finally application build successfully and started to launch the android emulator. That took longer than five minutes probably even longer than 10 minutes. So I waited. Finally, anticipating that I would finally see my app, instead I get an error message that read
the connection to the server was unsuccessful. (file:///android_asset/www/index.html)
Another google search indicated that the issue was that the emulator was probably taking too long so the application probably timed out (this is HTML remember?). So instead of following the post’s advice to set a timer event and then load the page, yadi yadi. I closed the error message on the emulator, opened the apps menu in the emulator and found my HelloCordova app and ran it from there.
At last Voila! The app was running. It couldn’t be a sweeter victory. Not 3 easy steps as advertised but 3 steps none the less. Please excuse me if I am not providing all of details in an organized manner. I’ll do my best to list all the links of my research at the end of this post and hey at least you’re getting more than I did when I started. I didn’t record all of my error messages or get screen captures but here is a list of the issues I ran across and the solutions for them.
Clearing Node’s NPM Cache Try this first if you’re getting dependency errors even after updating.
The connection was unsuccesful this error happens after you successfuly launch the emulator on step 3 but the application fails to run.
error-unable-to-add-plugins-perhaps-cordova-version-too-old/2919/6 I got this error when trying to run step 2.