Injecting AngularJS 1.4.7 into an IE crossrider extension

Question

I am developing an extension for browsers using the Crossrider framework. I am using the line

appAPI.resources.includeJS('js/angular.min.js');

to inject angular.js into the extension. This works fine on Chrome, but on IE 11 I get the error

---- JS Exception from: IE test staging ----
Error: Object expected
Source: Microsoft JScript runtime error
Location: resources
Line: 131

I looked around and found a few answers that suggested that either jQuery might be missing or there might be a trailing comma in the code itself. However, I am using

var jq = document.createElement('script');
jq.src = "http://code.jquery.com/jquery-1.11.3.js";
document.getElementsByTagName('body')[0].appendChild(jq);

to inject jquery into the document, so that shouldn't be a problem. As for the possibility of there being a trailing comma in the JS, I changed from the minified to the unminified version of AngularJS, but still got the same error, which makes me think that the line number in the error is meaningless. If that's the care, or forget that, no matter what the case is. Could someone please tell me what's going on and how to fix it?

PS. My environment is Windows 7 Ultimate 32 bit on VMWare Workstation 12 on a Ubuntu 14.04 LTS x64 bit machine

Answer 1

I think you have a mixed scopes issue here. appAPI.resources.includeJS runs in the Extension Page scope which the jq element you ate adding runs in the HTML Page scope. If you want to add the AngularJS to the HTML Page scope, use appAPI.resources.addInlineJS as follows:

var jq = document.createElement('script');
jq.src = "https://http://code.jquery.com/jquery-1.11.3.js";
document.getElementsByTagName('body')[0].appendChild(jq);
appAPI.resources.addInlineJS('js/angular.min.js');

[Disclosure: I am a Crossrider employee]