Ionic, like most modern frameworks, uses quite a few tools. These all need to be downloaded first. The Ionic Getting Started page describes what's needed, but is sometimes out of date, or points to out of date documentation. There are also many bumps that can occur on different platforms, especially if you have an old version of one of the tools already installed.
Note that these instructions are for a command-line interface (CLI). That means a Linus shell, a MacOS Terminal window, or a Windows bash-compatible command shell. If you are new to command shells, see Ionic's brief introduction.
There is a Visual Studio package for Cordova on Windows, but I not used it.
Below are my notes on various issues and possible fixes. As always, StackOverflow is your friend, but be sure to limit your search to items with the past year or so. Start with the Ionic Getting Started page , but read my notes before doing each step.
NodeJS comes with a package manager called npm. This is for loading node modules, i.e., libraries, and updating NodeJS.
If you have not installed NodeJS before, just use the appropriate installer at Node.org.
If you have installed NodeJS, update it! NodeJS has had many upgrades in the past year. There are several distinct ways to update NodeJS, from simply running the current installer, to using the built-in Node Package Manager (npm), or a NodeJS version manager, like n or nvm.
Also install Bower, another NodeJS package manager, similar to npm, that some tools and sample applications use.
Check your installation with these three commands:
$ node -v v6.10.0 $ npm -v 3.10.10 $ bower -v 1.8.0
Versions shown are what I had at the time of the writing.
If you get "command not found" for any of these, either the install failed, or you haven't set your PATH environment variable correctly. Don't go any further until you fix this.
Note that when you change environment variables, you need to either reload the file that sets those variables, or start a new command shell window.
Install Cordova, AngularJS, and Ionic
Ionic is a packaging of Cordova and AngularJS, with additional features and tools.
If all goes smoothly, these can all be installed with one command:
npm install -g cordova ionic
The -g means to install these packages for all NodeJS projects.
Test your installation with this command:
$ ionic info
This will print a list of the tools that have been installed and their version numbers. Any time you need to post for help, include this information in your posting.
Now test creating a toy app. Follow the Ionic instructions for starting a sample app. I like the sidemenu example as a starting point.
$ ionic start myApp sidemenu --v2
After the app is built, you need to move into the app directory to run it.
$ cd myApp
Test that the app can run in a web browser:
$ cd myApp $ ionic serve
This should start a web server, with the web app code, and open a browser with running the app.
Assuming this works, use control-C in the command shell to exit the server.
If you are on Windows, Linux, or MacOS, you can develop for Android. Even if you plan on mostly deploying to iOS, you should also test on Android.
Follow the instructions at Oracle that Cordova points to.
When done, test your installation with these two commands:
$ java -version java version "1.8.0_71" $ javac -version javac 1.8.0_71
The first command checks the Java runtime machine. The second version checks the Java compiler. Be sure both give the same answer, and that the version is at least Java 1.7, also known as Java 7.
Install and Test Android Studio
The Ionic documents point to Cordova for Android information. The Cordova information is out of date.
- It refers to installing just the Android Standalone SDK Tools. This is now much more complicated to do than just installing the complete Android Studio development environment.
- It says that after installation, there will be an android command. Google has removed this tool. You can do some of the tasks that command did with sdkmanager, avdmanager, and emulator (see below), but some times you will need to open Android Studio.
What I had to do was
- Install Android Studio.
- Open Studio and create the default HelloWorld app.
- In Studio, open Tools | Android |AVD Manager.
- Create at least one virtual device. You will need this to run the emulator. I picked the default suggestion of a Nexus 5.
- Run the project.
- Wait. It takes a minute or more the emulator to start.
- Verify that HelloWorld works.
Leave the emulator running. You'll need it again when testing Ionic.
Test Ionic for Android
Now, test that you can run the app in the Android emulator. First, add the code needed for Android to the app.
$ ionic platforms add android
Then try installing the app into the emulator:
$ ionic emulate android
Finally, deploy to a real device. First, test your device with Android Studio. Follow their instructions on how to turn on USB debugging with an Android device.
Be sure you have a cable for your Android device that sends both power and data. Many cables are just for charging.
In Studio, if you run your HelloWorld project, you should see your device as an option. Try running it. Note: there are many versions of Android. If HelloWorld doesn't run, you may need to adjust what version of Android you are targeting.
If you are able to run HelloWorld from Android Studio, now try running your Ionic app from the command line.
$ ionic run android
You must have a Macintosh to do iOS development. In particular, you need the current MacOS and the current version of Xcode.
Xcode can be downloaded from the Apple App Store. It's free, but you need an Apple ID.
After you get Xcode, you will need to open it and tell it to install additional development tools. In particular, you need to add the command line tools. Cordova uses these tools to create iOS hybrid apps.
Test Ionic for iOS
Test that your app works in an iPhone simulator.
First, add the iOS platform to your app, if you haven't already.
$ ionic platforms add ios
Now, run the simulator:
$ ionic emulate ios --target="iPhone-5"
Wait. The simulator will appear fairly quickly, but it make take a few minutes for app to be nstalled.