Pace.js не работает в IE 11

Question

У меня есть проект angular-cli. Я также добавил темп. Я добавил его в заголовок в index.html <script src="assets/lib/pace/pace.min.js"></script>, Он работает правильно в Chrome, но в IE-11 я получаю следующую ошибку:

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

Что я делаю неправильно?

Answer 1

Существует конфликт между темпом и изменениями в zone.js v0.8.12 - подробности см. Ниже. Чтобы решить эту проблему, я обязательно загрузил pace.min.js после zone.min.js и других полифилов IE, и это сработало как чудо.

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

Как предложено @Dovev Hefetz и обсуждено в этой ветке git, похоже, подтверждается, что порядок загрузки скриптов влияет на поведение IE в этой ситуации. Для тех, кто не знает, как заставить темп.min.js загружаться после основных сценариев в угловом формате, выполните следующие простые шаги.

• Обязательно измените zone.js в вашем package.json на "zone.js": "~0.8.11"

ИЛИ ЖЕ

• Удалите отдельный импорт из вашего index.html:

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

• В вашем угловом (-cli).json:

  1. Включите темп-тему.css в стили

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

  2. Включить в сценарии pace.min.js

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

• Это оно! Это должно гарантировать, что темп загружается после zone.js

Бонус: Angular поддерживает современные браузеры и Internet Explorer. Чтобы максимально использовать возможности, которые он предлагает, вашему проекту необходимы дополнительные небольшие настройки для поддержки некоторых библиотек. Хорошее место для начала - проверить этот замечательный пост.