ZoneAwarePromise overwritten when adding Handsontable to Angular-CLI scripts

Question

I'd like to add the Handsontable library to my Angular project. Using angular-cli, I added Handsontable to the scripts section of .angular-cli.json:

"scripts": [
  "../node_modules/handsontable-pro/dist/handsontable.full.js"
]

Webpack compiles successfully, however when loading the web application, I'm encountering the following error:

VM473:34309 Unhandled promise rejection Error: Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.
Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)
    at Function.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.assertZonePatched (zone.js:44)
    at new NgZone (core.es5.js:3757)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleFactoryWithZone (core.es5.js:4551)
    at core.es5.js:4596
    at run (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:34279:22)
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:34292:28)
    at MutationObserver.flush (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:91358:9)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runGuarded (zone.js:154)
    at MutationObserver.<anonymous> (zone.js:132)

Apparently, zone.js (imported in polyfills.ts by default) is loaded before Handsontable (actually the polyfills bundle is loaded first). I found a possible workaround by copying the JS file to my asset folder and moving the Handsontable import to the index.html:

<html>
  <head>
    <script src="assets/handsontable.full.js"></script>
  </head>
// ...

However, this does feel like a hack, as there is a scripts section in .angular-cli.json for the purpose of using it.

Any idea on how to fix this issue is highly appreciated.

@MehulJoshi, as descriped above, zone.js is imported in polyfills.ts (which is loaded first). — tilo, Jun 15 '17 at 13:33

score 3 · Answer 1 · answered Jun 16 '17 at 08:04

3

I had same issue, i've moved "import 'zone.js/dist/zone'" from "polyfill.ts" into "main.ts"

answered Jun 16 '17 at 08:04

Hakan Gümüş

61
3

Are there any potential downsides of moving it into main.ts? – tilo Jun 19 '17 at 11:03
This really feels hacky. Is there really no better explanation for why this happens? There aren't any issues on GitHub or anything regarding this and they don't mention it in their docs, so there must be another factor. – IRCraziestTaxi Jul 14 '17 at 21:34

jiali passion · Answer 2 · 2018-04-21T07:28:44.797

0

Please update to the newest version of zone.js, the error will just gone.

edited Apr 21 '18 at 07:28

answered Oct 27 '17 at 10:36

jiali passion

1,691
1
14
19

ZoneAwarePromise overwritten when adding Handsontable to Angular-CLI scripts

2 Answers2

Linked