javascript 未处理的promise拒绝：Zone.js检测到ZoneAwarePromise `(window| global).Promise`已被覆盖

idv4meu8 于 2023-09-29 发布在 Java

关注(0)|答案(6)|浏览(95)

我试图将Angular2快速入门代码合并到我当前的webpack构建中，似乎有什么东西覆盖了抛出此错误的zone.js promise。根据我看到的大多数stackoverflow帖子，zone.js文件需要在任何可能包含promise的文件之后加载。
我假设发生的事情是，在webpack加载其余的node_module文件之前，zone.js文件中带有<src>标签的html被加载。
有什么想法或建议吗？
这是我用的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不会被覆盖。

<!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>

JavaScript

来源：https://stackoverflow.com/questions/42741628/unhandled-promise-rejection-zone-js-has-detected-that-zoneawarepromise-window

6条答案

按热度按时间

jslywgbw1#

当我通过运行npm install zone.js@latest --save将zone.js包更新到最新版本时，它对我很有效。

赞(0）回复(0）举报 2023-09-29

gcuhipw92#

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

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

这是：

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

回到你的webpack问题，正如@estus所说，没有必要把systemjs导入到那里，因为它会包含在你的webpack生成的dist/*文件中（你的index.html中没有）。
我的index.html在“webpacking”我的项目看起来像：

<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>

希望有帮助。

赞(0）回复(0）举报 2023-09-29

yyhrrdl83#

有同样的问题。导入'zone.js/dist/zone';在polyfill. ts中。我把它移到了main.ts，它解决了我的问题

赞(0）回复(0）举报 2023-09-29

kq4fsx7k4#

我在旧的Safari浏览器上遇到了同样的错误，比如10.3，对我来说，这只是brrowserslist文件中缺少的一个条目。

ios_saf >= 10
Safari >= 10

源

赞(0）回复(0）举报 2023-09-29

nle07wnf5#

SebraGra的答案是正确的。然而，如果你在www.example.com网站上运行Angularasp.net，在我的例子中是4.5.2版本，当你在app-root标记后呈现脚本时，错误就消失了。您还需要专门针对dist文件夹中的es 2015或es 5输出
我还没有找到一种方法来动态切换它

@{
        Layout = null;
    }

    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title></title>
        <base href="/">
    </head>
    <body>
        <app-root></app-root>
        @Scripts.Render("~/Scripts/App-es5")
    </body>
    </html>

    public class AngularBundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/Scripts/App-es2015")
                .Include(
                    "~/App/dist/App/scripts-es2015*",
                    "~/App/dist/App/vendor-es2015*",
                    "~/App/dist/App/polyfills-es2015*",
                    "~/App/dist/App/runtime-es2015*",
                    "~/App/dist/App/main-es2015*"
                    ));

            bundles.Add(new ScriptBundle("~/Scripts/App-es5")
                .Include(
                    "~/App/dist/App/scripts-es5*",
                    "~/App/dist/App/vendor-es5*",
                    "~/App/dist/App/polyfills-es5*",
                    "~/App/dist/App/runtime-es5*",
                    "~/App/dist/App/main-es5*"
                ));
        }
    }

更新

我找到了一种通过替换script标签来动态切换它们的方法，这意味着你可以同时针对两者：

@Scripts.RenderFormat("<script type=\"module\" src=\"{0}\"></script>", "~/Scripts/App-es2015")
@Scripts.RenderFormat("<script src=\"{0}\" nomodule defer></script>", "~/Scripts/App-es5")

赞(0）回复(0）举报 2023-09-29

31moq8wy6#

remove import 'zone.js/dist/zone';从polyfill. ts。
并将其移动到main. ts。
在测试前清除所有浏览器缓存。

赞(0）回复(0）举报 2023-09-29