AngularJS 1.5 error bootstrap IBM Mobilefirst

Question

I seem to have problems combining an MFP hybrid (no cordova) application and angular 1.5. The same application with angular 1.4.9 works fine, but if I switch to angular1.5 then i get this error:

Error: [$injector:modulerr] Failed to instantiate module ng due to:
TypeError: Cannot set property 'aHrefSanitizationWhitelist' of null
at $$SanitizeUriProvider (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:17272:35)
at new <anonymous> (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/worklight/worklight.js:1033:23)
at Object.instantiate (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:4621:14)
at provider (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:4435:36)
at http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:367:32
at forEach (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:337:20)
at Object.provider (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:4425:9)
at ngModule (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:2476:16)
at Object.invoke (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:4606:19)
at runInvokeQueue (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:4499:35)
http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=ng&p1=TypeError%3A%…%2FHelloWorld%2Fandroid%2F1.0%2Fdefault%2Fvendor%2Fangular5.js%3A4499%3A35)

anyone a clue what it could be?

The ngRoute module is no longer part of the core angular.js file. If you are continuing to use $routeProvider then you will now need to include angular-route.js in your HTML — Nazmul Hasan, Mar 03 '16 at 17:14
@KennethVandenBerghe What version of MobileFirst are you using ? Every hybrid app in MobileFirst Hybrid based on Cordova. — Yuval Zymerman, Mar 08 '16 at 12:03
What do you mean no Cordova? not this kind of app: https://developer.ibm.com/mobilefirstplatform/documentation/getting-started-7-1/foundation/hello-world/integrating-mfpf-sdk-in-cordova-applications/ — Yuval Zymerman, Mar 08 '16 at 12:13
Indeed not that kind of app, but rather this: https://developer.ibm.com/mobilefirstplatform/documentation/getting-started-7-1/foundation/hello-world/your-first-hybrid-application/ — Kenneth Van den Berghe, Mar 08 '16 at 12:19
Since i need to support windows, that kind of mfp cordova app will not work — Kenneth Van den Berghe, Mar 08 '16 at 12:20
From reading the logs and the fact that it works when you change the Angular version it seems to me it's more related toAngularJS than MobileFirst. — Yuval Zymerman, Mar 08 '16 at 13:17

score 3 · Answer 1 · answered Mar 09 '16 at 16:19

3

I had the exact same problem when I upgraded to angular 1.5.0.
The problem turned out to be with a custom implementation of Function.prototype.bind that we had in our code, it looks like this interfered with the one defined in angular.

Take at the second line on your error callstack

at new <anonymous> (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/worklight/worklight.js:1033:23)

I think worklight.js may have an implementation of prototype.bind which is incompatible with the one in angular (see https://code.angularjs.org/1.5.0/docs/api/ng/function/angular.bind)

answered Mar 09 '16 at 16:19

pauloya

2,535
3
30
50

Did you had the same issue with worklight or was it a different piece of code that was incompatible with angular? If it was worklight, what did you do to solve the issue? – Kenneth Van den Berghe Mar 16 '16 at 07:54
This was with an internal library, I didn't use worklight. I'm guessing some worklight library has a custom implementation of `Function.prototype.bind`, I suggest you include the angular.js file after you include the worklight JS files, so that angular overrides the worklight one, instead of the other way around. – pauloya Mar 16 '16 at 12:53

score 0 · Answer 2 · answered Jun 23 '16 at 19:45

0

Also seeing this on the MFP 8.0 cordova plugin.

answered Jun 23 '16 at 19:45

Nick Maynard

641
5
10

have you found a solution – iqueqiorio Aug 11 '16 at 16:39
You can find workaround for MFP 8.0 Cordova plugin [here](http://stackoverflow.com/questions/38902169/mobilefirst-v8-and-bootstrap-angular-js-v1-5-3-error) – Vittal Pai Aug 12 '16 at 05:30

score 0 · Answer 3 · answered Jun 29 '16 at 21:03

As others have mentioned, this can be caused by polyfills for Function.prototype.bind. In particular, it seems to be caused by ones that don't properly handle calling the function as a constructor with new. Simple implementations may always return the bound object regardless of invocation, whereas the expectation is that the new operator prevails over the binding and the newly created object gets returned instead.

eg.

// create an object to bind to
var alt = {
    message: 'I am the alternate'
};

// our function
function myFunc() { 
   console.log( this.message );
};

// bind our alternate object to this for myFunc
myFunc.bind( alt );

Standard Invocation Runs as Expected

myFunc(); // output 'I am the alternate'

Invocation via new not as Expected (this is the one that breaks angular 1.5)

new myFunc(); // also outputs 'I am the alternate'</jscodeblock>

The expected behavior is that new invocation will return a new object and not the bound one.

If you need a polyfill for Function.prototype.bind be sure it properly handles this scenario such as the one found on MDN.

AngularJS 1.5 error bootstrap IBM Mobilefirst

3 Answers3

Linked