Ionic Framework and Windows Phone 8 Debugging
I recently worked on updating the Resgrid Responder app to utilize Ionic as the UI framework and Angular for the backend JS code. You can read through the reasoning’s for the switch in our previous blog post on the subject. The downside is that unlike Kendo, Ionic doesn’t have native support for Windows Phone.
At Resgrid we have to try and support as many platforms and use cases as possible. Resgrid is a SaaS product deployed on Microsoft Azure, providing logistics and management tools to first responder organizations like volunteer fire, career fire, EMS, search and rescue, public safety, disaster relief organizations, etc. It was founded in late 2012 by myself and Jason Jarrett (staxmanade).
This (http://appfoundry.be/blog/2014/10/16/ionic-windows-phone/) is a great resource for utilizing Ionic for your WP8 app, but we discovered it was lacking in a few parts. So utilize the excellent blog post by Vincent Bouillart above to get you started.
In this blog post we will be utilizing the Visual Studio Tools for Apache Cordova CTP3 and Visual Studio 2013 Update 4. If your using Visual Studio 15 Preview the same should also work.
Once those are installed you can create a new project. Our current project utilizes Telerik AppBuilder, but we just copied over/referenced our existing codebase in this project. The issue with Telerik AppBuilder is there is no good way to get information back from the device for debugging.
I started with creating a new Cordova project in VS.
After that I imported/ported over my code:
The config.xml is your Cordova config, double click it to get into your Cordova settings view. Next setup your Cordova settings to match your existing project. You could overwrite the config.xml and plugins directory with your current data, but because we utilize AppBuilder and they use non-standard configs we have to ours by hand.
Now we added in all of our plugins that we needed. Note on our box/VS this was a VERY slow process.
Next I set the configuration to Windows Phone 8. For me Universal did not work properly, but WP8 did. I also ensured I was set to Debug.
Now this is where I got lost. If you just debug on the device here you will get nothing! No output and to be honest my apps just crashed when they started up. But open up the project on your file system then navigate to the folder below:
bld\Debug\platforms\wp8
You should see another Visual Studio solution, this is the one that you will get debugging information from.
When you open up this project this is where you will find the MainPage.xaml where you set:
this.CordovaView.DisableBouncyScrolling = true;
When you have your WP8 device hooked up now you can debug the app.
If you open up the output window in Visual Studio you will now see error output (if you followed the above blog post).
Debugging WP8 apps from the original VS project may work in the future, but as of right now you need to load up and use the bld\Debug\Platform\wp8 one.
