WP8 xhr problem

[wideblue]

Ruing basic angular app (generated with yeoman angular generator) in Cordova Windows Phone 8 produces following error in weinre, the Visual Studio doesn't give any good indication why app is not running.

Error: Access is denied.
at hookedFunction (http://"my-weinre-ip":8080/target/target-script-min.js#ddtest:551:1)
at Anonymous function (x-wmapp0://www/components/angular/angular.js:9457:7)
at sendReq (x-wmapp0://www/components/angular/angular.js:9334:9)
at $http (x-wmapp0://www/components/angular/angular.js:9125:7)
at Anonymous function (x-wmapp0://www/components/angular/angular.js:9268:11)
at Anonymous function (x-wmapp0://www/components/angular/angular.js:7592:17)
at wrappedCallback (x-wmapp0://www/components/angular/angular.js:6996:15)
at wrappedCallback (x-wmapp0://www/components/angular/angular.js:6996:15)
at Anonymous function (x-wmapp0://www/components/angular/angular.js:7033:11)
at $eval (x-wmapp0://www/components/angular/angular.js:8219:9)

the Fixed #2303 was adapted and applied to angular-1.0.8 before running the app

I also applied Fixed #3103 but it doesn't affect the error massage.

Used:
angular:1.0.8
Cordova: 2.9.0

[wideblue]

Error: Access is denied happens on this line in angular.js
xhr.open(method, url, true);

when a view (main.html) tries to get loaded.
I found this thread dealing with what it seems very similar problem
https://groups.google.com/forum/#!topic/phonegap/p29CZUdMWz4

trying to follow suggestions from the tread I manually bootstrapped angular after cordova devicesready event has fired, but I'm still catching Access is denied error. I also tried changing templateUrl in $routeProvider from

templateUrl: 'views/main.html';
to
templateUrl: 'www/views/main.html';
to

templateUrl: '/www/views/main.html';
with no success.

[wideblue]

Also this

xhr.open('GET', "x-wmapp0://www/" + url, true);
as suggested here
requirejs/require-cs#48
is not working for me

[wideblue]

I have managed to get the app runing by including jquery (2.0.3) and changing line of code above xhr.open(method, url, true);
from
var xhr = new XHR();
to
var xhr = new XMLHttpRequest();

this is more a workaround than a solution
EDIT :
I spoke too quickly the above solution works on WP7 but unfortuanately not on WP8, where I get this error
http://stackoverflow.com/questions/18825945/phonegap-and-windows-phone-7-indexoutofboundsexception/18851913#18851913

I haven't figured out how to prepare xhr request to work on WP8 yet.

[mchambaud]

I'm having the same problem on WP8.

[wideblue]

Switching to Cordova 3.1.0 was an improvement and I managed to make the app working on WP8

[manuelnelson]

I upgraded to 3.1 and am using WP8 but haven't been able to get this to work with angular. Did you have to do any of the above workarounds to get it to work?

[wideblue]

I did all the things I mentioned but I haven't checked if they are all necessary.

I applied two patches from #3103 (manually), plus the change that I made, plus included jquery (2.0.3) before angular.

[mchambaud]

It was an issue with inconsistent use of HTTPS for me.

[regou]

Same here,I tried everything I found but not working,waiting for some good news

[naz]

Can anybody post at least some more complex working code? I am having the same trouble here on phonegap 3.1.0 WP8.

[mchambaud]

Gargol, are you using HTTPS? In my case, I got this error because not all static files were loaded securely.

[Robert-W]

I had this same issue and made a very simple app to test routing and was able to finally get it working after countless attempts, i used the following:
In angular.js change:

var xhr = new XHR();

to

var xhr = new XMLHttpRequest();

In your html, I set mine up as follows:
<script src="app/libs/jquery-2.0.3.min.js"></script>
<script>jQuery.isUnsafe = true;</script>
<!-- Angular Version 1.2.0 -->
<script src="app/libs/angular.js"></script>
<script src="app/libs/angular-route.js"></script>
<script src="app/js/app.js"></script>
<script src="app/js/controllers.js"></script>

And then I had to whitelist my urls in app.js as angular's function was treating my partials as untrusted, it was giving issues with this

templateUrl = $sce.getTrustedResourceUrl(templateUrl);

So my app.js looks like the following with some code to whitelist all my url's, note this could be potentially dangerous whitelisting everything so this is probably best used for dev but you can easily find some info on whitelisting specific url's in angular's website here

var module = angular.module("simpleApp",['ngRoute','appControllers','projectControllers']).
    config(["$routeProvider",function($routeProvider){
        $routeProvider.
            when("/home",{templateUrl:'app/partials/home.html',controller: 'homeController'}).
            when("/project1",{templateUrl:'app/partials/project1.html',controller: 'project1Controller' }).
            when("/project2",{templateUrl:'app/partials/project2.html',controller: 'project2Controller' }).
            otherwise({redirectTo: "/home"});
}],function($sceDelegateProvider){
    $sceDelegateProvider.resourceUrlWhitelist(['.*']);
});

If people want full source code let me know and I will upload it to github, I just got this working maybe 20 minutes ago at the office so after I get home I can upload

This was using 2.9.1 template in Visual Studio, and then using cordova 3.2.0-rc.1 to create the project from the command line and copying the code in www over to the template

[sureshvsvb]

Hi Robert-W,

I am trying to build a windows 8 APP with AngularJS. Routing seems to me not working out. I am using VS 2013 and creating a metro app using javascript and html.

I have tried your suggestion but it did not worked out for me. I used Jquery specific to W8.

Please share the above working code, so i can check and try it out.

Thanks,
Suresh

[Robert-W]

Hi Suresh,

I have uploaded the code here: https://github.com/Robert-W/Angular-Win8

This is just the HTML and JavaScript Code, all the changes mentioned in my above post are included in this code so you won't have to add jQuery or angular yourself or change the XHR to XMLHttpRequest, that's all done.

I included in the repo my cordova.js and cordova-plugins.js that was auto generated by the cordova command line tool, these are from version 3.2.0-rc1 so make sure to use these and not older ones, I was not able to get this work with earlier versions of cordova.

Also Very IMPORTANT, I tested this earlier today with the PhoneGap 2.9.0 template in visual studio and a much larger project then the one I posted at the above url and could not get it to work, then I remembered I had the 2.9.1 template, copied all the code from the www directory and it immediately worked.

Also, in index.html, you'll see some code commented out, uncomment the script tag for cordova.js and also uncomment the code in window.onload, you will need to bootstrap the app after device ready fires, I have read this is also required but have not yet tested without it so to be safe, I would do it this way

[sureshvsvb]

Hi Robert,

When i try to use the same files ( jquery, angular.js and angular-route.js) i am getting unsafe content error. So i am using jQuery specific to Windows 8 file.

Any other suggestion to implement angular routing on windows 8 ?

How can i run your solution ?

Regards,
Suresh