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?

Mho

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 – Ober

I use ui-router in this project. – Mho

Well, can you share similar demo project. – Ober

@KennethVandenBerghe What version of MobileFirst are you using ? Every hybrid app in MobileFirst Hybrid based on Cordova. – Obscurant

I am using mfp version 7.1.0.00.20160229-1245 – Mho

What do you mean no Cordova? not this kind of app: developer.ibm.com/mobilefirstplatform/documentation/… – Obscurant

Indeed not that kind of app, but rather this: developer.ibm.com/mobilefirstplatform/documentation/… – Mho

Since i need to support windows, that kind of mfp cordova app will not work – Mho

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. – Obscurant

Answer 1

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)

Ricoricochet

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? – Mho

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. – Ricoricochet

Answer 2

Also seeing this on the MFP 8.0 cordova plugin.

Demetria

have you found a solution – Communicable

You can find workaround for MFP 8.0 Cordova plugin here – Mew

Answer 3

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.

Corporative