Failing to load resources when building for Android Emulator using Visual Studio Tools for Apache Cordova in Visual Studio 2013

Question

I am using Visual Studio Tools for Apache Cordova for Microsoft Visual Studio 2013 CTP3.0.

I created a new solution using the "Ionic Login Template".

The appliction works fine when I run it in the "Ripple - Nexus Galaxy" online service Android emulator but not in the local Android developer tools "Android Emulator".

I get the following output in the javascript console when VS builds the solution for the local emulator:

• Failed to load resource
  File: ionic.bundle.js, Line: 0, Column: 0
• Failed to load resource
  File: ionic.css, Line: 0, Column: 0
• Invalid CSS property name: animation-timing-function
  File: ionicons.min.css, Line: 6, Column: 1
• Uncaught ReferenceError: angular is not defined
  File: app.js, Line: 8, Column: 0
• Current window: file:///android_asset/www/index.html

Why could VS be failing to load the ionic.bundle.js and ionic.css resources for the local emulator and not for Ripple?

PS. For further information:

A) I have set up the PhoneGap developer app on my Samsung Galaxy S3. I tried navigating to the "bld\Debug" folder of the solution in cmd and running "phonegap build android" and "phonegap serve" and the application runs correctly on the phone.

B) I also tried using the online PhoneGap build service and downloaded the resulting .apk on the Galaxy phone and in that case the application ran incorretly in the same way as in the emulator, i.e. ionic.bundle.js and ionic.css had failed to load.

Answer 1

Try to remove starting href, src slashes

<link href="lib/ionic.css" rel="stylesheet">
<script src="lib/ionic.bundle.js"></script>

It helped me.

Answer 2

Did you ever resolve? I just ran into the same issue and managed to resolve by moving 'base href="/" /' after 'script' tags in my index.html. I know it is months later, but wanted to share in case someone else ran into this.