Default ionic project template in Visual Studio 2015 produces white screen on device


I'm in the process of creating a cross-platfrom utility application for mobile devices and wanted to avoid having to rewrite the UI for each platform (BlackBerry, iOS, Windows Phone, Android). In looking for cross-platform solutions, I ran across ionic which builds on Cordova to produce a native-like experience.

I'm using VS 2015 and installed the ionic tabs template from the online gallery. While the sample application that gets generated runs fine in Ripple, I just see a white-screen when running on my Android device. The best part is that there are no error messages even when I run in Debug mode. Fun.

Fortunately the solution in my case was pretty straight forward.

My android test device does not have internet connectivity, which made me wonder about these lines in the index.html file of the generated ionic tabs project:

ionic_tabs_issue.png

 

For some reason the default ionic project reaches out to the internet for css and javascript, which puzzles me. If I'm building a stand alone application for a mobile phone, why reference internet locations for critical application functionality?

 

The solution here was for me to download the ionic.css and ionic.bundle.min.js files to the corresponding css and js folder locations under the www folder and update the references in the index.html file. The solution tree looks like this:

ionic_tabs_updatedfolderstructure.png

 

Now when I deploy the ionic app to my android device it works great!