未处理的承诺拒绝:Zone.js检测到ZoneAwarePromise`(window | global).Promise`已被覆盖 [英] Unhandled promise rejection: Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten

问题描述

我尝试将Angular2快速入门代码合并到当前的webpack构建中，似乎某些内容正在覆盖 zone.js 承诺，从而引发此错误.根据我所见的大多数stackoverflow帖子， zone.js 文件需要在可能包含promise的任何文件之后加载.

I have tried to incorporate the Angular2 quickstart code into my current webpack build and it seems that something is overwriting the zone.js promise which is throwing this error. According to most of the stackoverflow posts I've seen, the zone.js file needs to be loaded after any files that may include promises.

我假设正在发生的事情是在Webpack加载其余部分之前先加载具有< src> 标签和 zone.js 文件的html. node_module 文件.

I'm assuming what is happening is that the html that has the <src> tag with the zone.js file is getting loaded before webpack loads the rest of the node_module files.

有什么想法或建议吗?

这是我正在使用的 package.json .

{
  "name": "site-pinger",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build:watch": "webpack --colors --progress --watch",
    "build": "webpack --colors --progress",
    "start": "webpack-dev-server --progress --colors --hot --inline --port 3000"
  },
  "author": "",
  "license": "ISC",
  "standard": {
    "parser": "babel-eslint"
  },
  "babel": {
    "presets": [
      "latest",
      "stage-0"
    ]
  },
  "devDependencies": {
    "@types/jasmine": "2.5.36",
    "@types/node": "^6.0.46",
    "babel-core": "^6.17.0",
    "babel-eslint": "^7.0.0",
    "babel-loader": "^6.2.5",
    "babel-polyfill": "^6.16.0",
    "babel-preset-latest": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "canonical-path": "0.0.2",
    "concurrently": "^3.2.0",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "jasmine-core": "~2.4.1",
    "json-loader": "^0.5.4",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lodash": "^4.16.4",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",
    "standard": "^8.4.0",
    "style-loader": "^0.13.2",
    "ts-loader": "^2.0.1",
    "tslint": "^3.15.1",
    "typescript": "~2.0.10",
    "url-loader": "^0.5.8",
    "webpack": "^2.1.0",
    "webpack-dev-server": "^2.4.1"
  },
  "dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/forms": "~2.4.0",
    "@angular/http": "~2.4.0",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/router": "~3.4.0",
    "angular-in-memory-web-api": "~0.2.4",
    "systemjs": "0.19.40",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "zone.js": "^0.7.4"
  },
  "repository": {}
}

---

这是 webpack.config.js 文件

'use strict'

const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const devtool = 'source-map'

const devServer = {
  historyApiFallback: true
}

const entry = {
  main: [
    'babel-polyfill',
    './src/main'
  ],
}

const output = {
  filename: '[name].js',
  path: __dirname + '/dist',
  publicPath: '/'
}

const extensions = [
  '.js',
  '.ts',
  '.css',
  '.html'
]

const modules = [
  'node_modules',
  'lib'
]

const rules = [{
  test: /.ts$/,
  exclude: /node_modules/,
  loaders: ['ts-loader']
}, {
  test: /.js$/,
  exclude: /node_modules/,
  loaders: ['babel-loader']
}, {
  test: /.css$/,
  loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
}, {
  test: /.html$/,
  exclude: /node_modules/,
  include: /static/,
  loader: 'html-loader'
}, {
  test: /.(ico|png|eot|svg|ttf|woff|woff2)$/,
  loader: 'url?limit=10000'
}]

const plugins = [
  new ExtractTextPlugin('[name].css'),
  new HtmlWebpackPlugin({
    hash: true,
    inject: 'head',
    template: 'static/index.html'
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: Infinity
  })
]

module.exports = {
  devtool,
  devServer,
  entry,
  output,
  resolve: {
    extensions,
    modules
  },
  module: {
    rules
  },
  plugins
}

---

这是我的index.html，在其中我手动包含了 zone.js 文件，以确保其Promise不会被覆盖.

---

This is my index.html where I've manually included the zone.js file to ensure that their Promise doesn't get overwritten.

<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Site Pinger</title>

    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="../src/systemjs.config.js"></script>
  </head>

  <body>
    <app>Loading AppComponent content here ...</app>
  </body>
</html>

推荐答案

加载 core-js 和 zone.js 时，我遇到了类似的错误.对我来说，诀窍是将导入的 zone.js 放在 core-js 之后.

I had a similar error when loading core-js and zone.js. What did the trick for me was to just put the import for zone.js after core-js.

更改了此内容

import 'zone.js/dist/zone';
import 'core-js';

对此:

import 'core-js';
import 'zone.js/dist/zone';

回到您的webpack问题，如@estus所说，无需将 systemjs 导入放置在那里，因为它将包含在您的 dist/* 中由webpack生成的文件(在index.html中丢失了).

Going back to your webpack problem, as @estus said, there is no need to put the systemjs import there, as it will be included in your dist/* files generated by webpack (which are missing in your index.html).

在打包"我的项目后，我的index.html如下:

My index.html after "webpacking" my project looks like:

<html>
  <head>
    <!-- only some css links here -->
  </head>
  <body>
    <my-app>
    </my-app>

    <script src="dist/vendor.bundle.min.js"></script>
    <script src="dist/app.bundle.min.js"></script>
  </body>
</html>

希望有帮助.

这篇关于未处理的承诺拒绝:Zone.js检测到ZoneAwarePromise`(window | global).Promise`已被覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！