A common thing I see with the people that I help is they are unfamiliar with how to properly troubleshoot their code. Previously I had written an article regarding how to view the ADB debug logs when testing, but even that has proven to have loose ends. It did a wonderful job on educating everyone how to access the logs, but not so much in the realm of testing and understanding what is seen.
The following will help you rid your project of common errors and problems.
To prove everything, lets go through a fresh Ionic project together. Start by running the following from your Terminal or command prompt:
ionic start IonicProject blank
ionic platform add android
ionic platform add ios
The most common thing I see is people using the
ionic serve feature of the CLI and thinking it is the miracle solution for app testing. This is fine for testing UI pieces of your Ionic application, but nothing more. What
If you run
This is where I think people get thrown off. What happens if you want to add some complexity to the application? For example, what if you want to use an Apache Cordova plugin such as Toast notifications? If you’ve ever visited the source code of an Apache Cordova plugin, you’ll see there are native class files involved. For Android it will be Java and for iOS it will be Objective-C. These are two languages that must be first compiled on the device, not to mention a web browser is going to have no idea what to do with them.
ionic serve command because mobile and desktop browsers aren’t going to know what to do.
So let’s give it a try. From the Terminal with your project as the current directory, run the following:
cordova plugin add https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git
Now proceed to following the tutorial I had made for Toast notifications. When you’re ready to test it, run
ionic serve and check it out in your browser. You should notice the following error:
TypeError: Cannot read property 'toast' of undefined
at Object.show (http://localhost:8100/js/ng-cordova.min.js:9:15751)
at Scope.$scope.showToast (http://localhost:8100/js/app.js:23:23)
at $parseFunctionCall (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20124:18)
at Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22178:28)
at Scope.$apply (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22276:23)
at HTMLButtonElement.<anonymous> (http://localhost:8100/lib/ionic/js/ionic.bundle.js:50862:13)
at HTMLButtonElement.eventHandler (http://localhost:8100/lib/ionic/js/ionic.bundle.js:10823:21)
at triggerMouseEvent (http://localhost:8100/lib/ionic/js/ionic.bundle.js:2811:7)
at tapClick (http://localhost:8100/lib/ionic/js/ionic.bundle.js:2800:3)
toast is undefined because the browser can’t process native code. You can also immediately determine I’m using
ionic serve based on the http://localhost:8100 found in the log contents. If you turn around and do the following it will work fine:
ionic build android
adb install -r platforms/android/ant-build/CordovaApp-debug.apk
The above will build a binary file and install it to the device.
You’re developing mobile applications, not web applications. Save yourself the hassle of these trivial errors by testing directly on your device with a compiled version of your application. Short-cutting the testing process is going to create a mess that can easily be avoided.