Pace.js not working in IE 11

Question

I have an angular-cli project. I have also added pace. I added it inside the header in index.html <script src="assets/lib/pace/pace.min.js"></script>. It works correctly in chrome, but in IE-11 I get the following error:

ERROR TypeError: Invalid calling object
      stack: "TypeError: Invalid calling object
   at scheduleTask (http://localhost:4200/polyfills.bundle.js:8607:13)
   at ZoneDelegate.prototype.scheduleTask (http://localhost:4200/polyfills.bundle.js:6279:21)
   at DELEGATE_ZS.onScheduleTask (http://localhost:4200/polyfills.bundle.js:6169:13)
   at ZoneDelegate.prototype.scheduleTask (http://localhost:4200/polyfills.bundle.js:6273:17)
   at Zone.prototype.scheduleTask (http://localhost:4200/polyfills.bundle.js:6104:17)
   at Zone.prototype.scheduleMacroTask (http://localhost:4200/polyfills.bundle.js:6127:13)
   at Anonymous function (http://localhost:4200/polyfills.bundle.js:8637:17)
   at proto[name] (http://localhost:4200/polyfills.bundle.js:7142:17)
   at Anonymous function (http://localhost:4200/vendor.bundle.js:63666:13)
   at Observable.prototype._trySubscribe (http://localhost:4200/vendor.bundle.js:4172:13)",
      Symbol(observable)_h.fo48yw1o6i8: undefined,
      Symbol(rxSubscriber)_g.fo48yw1o6i8: undefined

What am I doing wrong?

Answer 1

There is a conflict between pace and the changes in zone.js v0.8.12 - see below for details. To fix the issue I made sure to load pace.min.js after zone.min.js and the other IE polyfills and it worked like a charm.

https://github.com/HubSpot/pace/issues/399

In the newest version of zone.js (0.8.12) using pace with it causes all XMLHttpRequests to fail with the error message:

TypeError: Unable to get property 'apply' of undefined or null reference
Please see my issue for more information. If I get time I'll try and fix the issue inside pace itself but I've already spent the good part of 3-4 hours trying to debug this issue so we'll see..

https://github.com/angular/zone.js/issues/816

After updating zone.js to the latest version (0.8.12) we started getting errors when loading an Angular page with angular/http calls in Internet Explorer 11 (works fine in Chrome). The request never initiates and there are a few errors in the console:

Unhandled Promise rejection: Unable to get property 'apply' of undefined or null reference ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Unable to get property 'apply' of undefined or null reference TypeError: Unable to get property 'apply' of undefined or null reference
at scheduleTask (https://localhost:44334/dist/vendor.js?v=OQlIcABpA29sHMIhDRnH-EBWeJs6_U6bx7vEgZihM_8:142795:13)
at ZoneDelegate.prototype.scheduleTask (https://localhost:44334/dist/vendor.js?v=OQlIcABpA29sHMIhDRnH-EBWeJs6_U6bx7vEgZihM_8:140947:21)
at Zone.prototype.scheduleTask (https://localhost:44334/dist/vendor.js?v=OQlIcABpA29sHMIhDRnH-EBWeJs6_U6bx7vEgZihM_8:140772:17)
at Zone.prototype.scheduleMacroTask (https://localhost:44334/dist/vendor.js?v=OQlIcABpA29sHMIhDRnH-EBWeJs6_U6bx7vEgZihM_8:140795:13)
at Anonymous function (https://localhost:44334/dist/vendor.js?v=OQlIcABpA29sHMIhDRnH-EBWeJs6_U6bx7vEgZihM_8:142824:17)
at proto[name] (https://localhost:44334/dist/vendor.js?v=OQlIcABpA29sHMIhDRnH-EBWeJs6_U6bx7vEgZ
After digging around a bit, it looks like a very new bit of code could be causing this, introduced in PR #800

The exact line of failure is below, where oriAddListener is undefined, causing the above error :

oriAddListener.apply(data.target, ['readystatechange', newListener]); // line 110
Rolling zone.js back to 0.8.11 which was before that PR fixes the issue and works as expected.

Answer 2

As suggested by @Dovev Hefetz and discussed in this git thread, it seems to be confirmed that the order of scripts loading affects IE behavior in this situation. For those not sure how to make pace.min.js load after the main scripts in angular, follow these easy steps.

• Make sure to change zone.js in your package.json to "zone.js": "~0.8.11"

OR

• Remove the individual imports from your index.html :

  <script src="/pace/pace.js"></script> <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />

• In your angular(-cli).json:

  1. Include pace-theme.css in the styles

  "styles": [ "src/assets/plugins/pace/pace-theme-flash.css", "src/styles.scss" ],

  2. Include pace.min.js in the scripts

  "scripts": [ "src/assets/plugins/pace/pace.min.js" ]

• That's it! This should ensure that pace is loaded after zone.js

Bonus: Angular supports modern browsers and Internet Explorer. To make the most of the features it offers, your project needs additional small tweaks to support some libraries. A good place to start is to check this great post.