Installing Cordova, and Ionic: Some Solutions To Common Installation Errors.

Appathetic just started on some new apps this year. We wanted to service both platforms — iOS, and Android. And, that is a huge ask. We are two guys, who have their day jobs going on, and then some. We still want to make apps, but it is going slow; slower than usual. And, to top it off, we would like to make more apps that are born out of our more weirder ideas, and perceptions.

I’ll try explaining our current situation in pseudo code. Just for the heck of it.

var designerHalf = 1;

var developerHalf = 1;

var appathetic = designerHalf + developerHalf;

ideasForApps = function(n){}; //n > 0

var idealWorld = appsUnderAppathetic =ideasForApps;

var idealTimeToReleaseOneApp = t;

if(developerHalf >= 2) idealWorld = idealWorld X 2 X t; //iOS + Android

timeToReleaseOneApp = function(m){ }; //m is a complex formula based on an algorithm where both us find the free time to sit on our ideas, and execute them

var appsUnderAppathetic = (ideasForApps - (n-1));

var reality = Apps_Under_Appathetic * m * 2; //2 = iOS and Android

print(appsUnderAppathetic); //prints 0 as of today.

While the above pseudo code maybe bugged from hell, it is an ongoing-refactoring process. Then, there are things in the above that we can actually work on. For example, I stumbled upon Ionic. Gave it a whirl, and decided that we should use the framework to create our apps, and launch it for both platforms (if not for Windows) at the same time, while maintaining a single codebase.

Hybrid app making frameworks have come a long way. And, to me, Ionic has proven this. It only makes sense to go this route, instead of writing native code for each of the platforms, which would translate p = m; translate into having but one app out there, at any given time, because that’s what we can spare as time, and resources. Ionic changes that for us.

While Ionic is great, it did take me time to set it up. It’s a bit of a pain to get it running with it, and to run on of their example apps; at least that’s what I learned, while setting up an Ionic dev environment, first on Mac OS Sierra, and then inside a vagrant box.

While the setup on Sierra had the same issues as setting it up on a vagrant box, I opted to use the vagrant machine, running Ubuntu, and I did have multiple issues crop up. It’s not straight forward a procedure setting up Ionic (in most cases), especially when you’re new to node.js.

Here are some solutions to some more common issues that I found to be most frustrating. I hope this helps someone out there.

1. Cordova gets installed. Ionic installation gets killed in mid process:

npm install -g cordova ionic

This is the first issue that cropped up. While Cordova got installed flawlessly, Ionic was repeatedly being killed for some reason. The reason that it kept getting killed, as it turns out, was the fact that the buffer memory was being used up the cordova install to output statements on the stdout. The solution was to break up the install command, or increase the RAM of the virtual machine.

If breaking up the install command, then install cordova first, followed by ionic.

npm install -g cordova 

npm install -g ionic

2. Ionic gets installed fine, but executing ionic in the terminal pops up the command not found error.

This was a blood curdling issue. I took close to about 3 hours to figure out what was going on here. While my issue was missing -g flag, it turns out there are other possible solutions to this one problem.

Setting the prefix to /usr/local or whatever path seems correct for you.

npm config get prefix 

//if not set to /usr/local then set it using

npm config set prefix /usr/local

//to check the root dir for node_modules (after setting it with above)

npm root  -g

Since in my case Ionic got installed within my home directory, it was simple to create a soft link to the executable

//replace indefiniteloop with your username

sudo ln -s /home/indefiniteloop/npm/bin/ionic /usr/bin/ionic

//note: this would not work for most people on Mac OS, in which case revert to removing / uninstalling Ionic, and installing it with the -g flag. If that doesn't help, then try setting the root using the first solution above.

Another issue may be the version(s) of npm and / or node.js that you have working on your machine or version conflicts. Using the LTS version of node.js is best. And, using n works for the better. The Ionic Box (vagrant box), uses n to install, use, and maintain node.js versions. Alternatively, you could use nvm

3. ionic start appname --v2 throws npminstall errors.

While setting the registry (see below code), solved this for me, it turns out, yet again, there are other possible solutions to solve this issue.

The below set this straight for me. It seemed that there was some issue while recognizing typescript or installing additional node modules for it.

//the below code worked fine with --ts flag

npm start testapp tabs --v2 --ts //this works without running the below in terminal

//set this if you don't want to keep using the --ts flag

npm config set @ionic-native:registry https://registry.npmjs.org/ 

//after the above command run

npm start testapp tabs --v2

While the above was the solution to my issue of getting npminstall errors, there are other possible solutions that may work for you.

Point no 2, above, could be one reason, why the start argument fails. Check the root path, and set it up correctly to point to /usr/local. Check versions of node.js (stick to the LTS versions), and npm.

Another issue could be that git is not installed or an older version of git is installed. Update git, and check again.

4. While the Ionic Box boots up, and gets provisioned fine, Ionic is not recognized as a command.

The issue was for some reason Ionic failed to installed during installation. Assuming it does not get installed during provisioning, install it manually using npm install -g ionic or change / edit the provisioning shell script.