CODEWITHSUNDEEP
javascriptangularangular-clihandsontablezone.js
tilo
tilo

Reputation: 14169

ZoneAwarePromise overwritten when adding Handsontable to Angular-CLI scripts

I'd like to add the Handsontable library to my Angular project. Using , 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, (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.

Upvotes: 1

Views: 1473

Answers (2)

jiali passion
jiali passion

Reputation: 1711

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

Upvotes: 0

Hakan G&#252;m&#252;ş
Hakan G&#252;m&#252;ş

Reputation: 61

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

Upvotes: 3

Related Questions