console.table(mapping) causing error in IE 11 (edge mode)

[psenechal]

Running @uirouter/angular v1.0.0-beta.7 alongside @angular v4.3.6 produces the following error in Internet Explorer 11 running in Edge mode:

"Transition Rejection($id: 0 type: 6, message: The transition errored, detail: TypeError: Object doesn't support property or method 'table')"

The application will not load in IE, however it loads fine in Chrome and Firefox. I traced it down to a few commands in ui-router-core that are using console.table(mapping). If I change these to console.log(mapping), the app will load perfectly fine in IE.

It seems to be there is an issue with console.table on IE. Does anyone know of a way around this error or is this something that can be changed in the project?

[christopherthielen]

As a workaround, do not enable all the trace levels. The only console.table I found in @uirouter/core was in the VIEWCONFIG trace level.

  traceViewSync(pairs: any[]) {
    if (!this.enabled(Category.VIEWCONFIG)) return;
    const mapping = pairs.map(([ uiViewData, config ]) => {
      const uiView = `${uiViewData.$type}:${uiViewData.fqn}`;
      const view = config && `${config.viewDecl.$context.name}: ${config.viewDecl.$name} (${config.viewDecl.$type})`;

      return { 'ui-view fqn': uiView, 'state: view name': view };
    }).sort((a, b) => a['ui-view fqn'].localeCompare(b['ui-view fqn']));

    console.table(mapping);
  }

I will also add a conditional in the traceViewSync function so this won't be a problem in the future.

[psenechal]

Thanks Chris. I disabled tracing in the project and we're able to load it in IE now.

We did find another issue with IE 11 that I'm seeing present on your sample app as well. We get this error in the console every time we transition to another page. You can see it if you open IE 11 and then open the console. Then go to: https://ui-router.github.io/sample-app-angular/#/home

You'll see that it generates the following:

Transition Rejection($id: 0 type: 6, message: The transition errored, detail: TypeError: Object doesn't support this action) TypeError: Object doesn't support this action at BaseLocationServices.prototype.url (https://ui-router.github.io/sample-app-angular/vendor.bundle.js:20388:17) at lateRebindFunction (https://ui-router.github.io/sample-app-angular/vendor.bundle.js:252:9) at UrlRouter.prototype.push (https://ui-router.github.io/sample-app-angular/vendor.bundle.js:29174:9) at updateUrl (https://ui-router.github.io/sample-app-angular/vendor.bundle.js:49405:9) at invokeCallback (https://ui-router.github.io/sample-app-angular/vendor.bundle.js:13590:13) at TransitionHook.prototype.invokeHook (https://ui-router.github.io/sample-app-angular/vendor.bundle.js:13602:13) at Anonymous function (https://ui-router.github.io/sample-app-angular/vendor.bundle.js:13724:41) at TransitionHook.runAllHooks (https://ui-router.github.io/sample-app-angular/vendor.bundle.js:13724:9) at transitionSuccess (https://ui-router.github.io/sample-app-angular/vendor.bundle.js:11590:13) at ZoneDelegate.prototype.invoke (https://ui-rou

We don't see this message in the console on Chrome or Firefox...unfortunately only on Internet Exploder (not a typo). Our testing group is really picky about error messages and even though this error message doesn't cause any functionality issues, they're complaining about it. Any ideas on what might be causing this or how to avoid it as well? Thanks so much!

[psenechal]

I think I tracked the one above down to this:

BaseLocationServices.prototype.url = function (url, replace) { if (replace === void 0) { replace = true; } if (predicates_1.isDefined(url) && url !== this._get()) { this._set(null, null, url, replace); if (this.fireAfterUpdate) { var evt_1 = common_1.extend(new Event("locationchange"), { url: url }); this._listeners.forEach(function (cb) { return cb(evt_1); }); } } return utils_1.buildUrl(this); };

[christopherthielen]

Thanks for confirming. I believe the second error you mentioned has been reported

[christopherthielen]

Reported here ui-router/core#64