AngularJS 1.5 error bootstrap IBM Mobilefirst

14
votes

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?

3
angularjsibm-mobilefirst
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
I use ui-router in this project. - Kenneth Van den Berghe
Well, can you share similar demo project. - Nazmul Hasan
@KennethVandenBerghe What version of MobileFirst are you using ? Every hybrid app in MobileFirst Hybrid based on Cordova. - Yuval Zymerman
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

3 Answers

3
votes

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)

0
votes

Also seeing this on the MFP 8.0 cordova plugin.

0
votes

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.