angular-ui / ui-router

The de-facto solution to flexible routing with nested views in AngularJS
http://ui-router.github.io/
MIT License
13.54k stars 3k forks source link

Facing issue with angular ui-router 1.0.5 and angular 1.6.5 in IE11 browser Ask #3579

Closed gopirajum closed 6 years ago

gopirajum commented 6 years ago

ui-router is causing an issue in the IE11 browser, Everything is working fine in chrome, firefox, and even IE10. getting following error in the browser console.

Current Behavior:

SCRIPT5022: [$injector:modulerr] Failed to instantiate module TestApp due to:
TypeError: Object.keys: argument is not an Object
   at _extend (https://example.com/scripts/vendor.09a8eb90.js:100012:9)
   at Anonymous function

I'm pasting the ui-router code here where exactly causing an issue.

function _extend(toObj) {
    for (var i = 1; i < arguments.length; i++) {
        var obj = arguments[i];
        if (!obj)
            continue;
        var keys = Object.keys(obj);
        for (var j = 0; j < keys.length; j++) {
            toObj[keys[j]] = obj[keys[j]];
        }
    }
    return toObj;
}

Any guesses of why this happening would be greatly appreciated.

christopherthielen commented 6 years ago

This error happens in IE11 when you do Object.assign(null). I suspect one of the arguments to this function is null or undefined. _extend is used extensively, so it's impossible to know what the root cause is without a stack trace (with sourcemaps so its not all vendor.??????.js) .

This could be a bug in ui-router, or in your code (sometimes ui-router uses your configuration as second/third arguments to this fn)

You should use the debugger and walk up the stack when this occurs to find out what is happening.

christopherthielen commented 6 years ago

Any updates? Did you try debugging?

daerogami commented 6 years ago

Just a note for others that run into this (because this is a top search result in google).

Issue was with my usage of a transition hook:

$transitions.onSuccess("app.somestate.**", (transition) => {
    doStuff();
  });

The first param should be an object:

$transitions.onSuccess({ from: "app.somestate.**"} , (transition) => {
    doStuff();
  });

Reference: https://ui-router.github.io/guide/transitionhooks

@christopherthielen Not sure if there is better way to have error checking around this but it was a convoluted road to find out that this is what IE11 was complaining about (Chrome/FF had no issue with it being a string)