将 Handsontable 添加到 Angular-CLI 脚本时覆盖 ZoneAwarePromise答案

【问题标题】：ZoneAwarePromise overwritten when adding Handsontable to Angular-CLI scripts将 Handsontable 添加到 Angular-CLI 脚本时覆盖 ZoneAwarePromise
【发布时间】：2017-11-17 21:53:08
【问题描述】：

我想将 Handsontable 库添加到我的 Angular 项目中。使用angular-cli，我将 Handsontable 添加到.angular-cli.json 的脚本部分：

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

Webpack 编译成功，但是在加载 web 应用程序时，我遇到了以下错误：

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)

显然，zone.js（默认在 polyfills.ts 中导入）在 Handsontable（实际上是 polyfills 包 is loaded first）之前加载。通过将 JS 文件复制到我的资产文件夹并将 Handsontable 导入移动到 index.html，我找到了一种可能的解决方法：

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

但是，这确实有点像 hack，因为.angular-cli.json 中有一个脚本部分用于使用它。

非常感谢任何有关如何解决此问题的想法。

【问题讨论】：

您在哪里导入 zone.js？使用任何类型的装载机？
@MehulJoshi，如上所述，zone.js 是在 polyfills.ts 中导入的（先加载）。

标签： angular-cli zone.js javascript angular angular-cli handsontable zone.js

【解决方案1】：

我遇到了同样的问题，我已将“import 'zone.js/dist/zone'”从“polyfill.ts”移至“main.ts”

【讨论】：

将其移至 main.ts 是否有任何潜在的缺点？
这真的感觉很hacky。为什么会发生这种情况真的没有更好的解释吗？ GitHub 上没有任何问题或与此相关的任何内容，他们也没有在他们的文档中提到它，所以肯定有另一个因素。

【解决方案2】：

请更新到最新版本的zone.js，错误就会消失。

【讨论】：