Unhandled promise rejection: Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten

Question

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.

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.

Any ideas or suggestions?

---

This is the package.json I'm using.

{
  "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": {}
}

---

This is the webpack.config.js file

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

---

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>

Answer 1

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.

Changed this:

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

to this:

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

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

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>

Hope it helps.

Answer 2

It worked for me when I updated my zone.js package to the latest version by running npm install zone.js@latest --save.

Answer 3

Had same issue. There is import 'zone.js/dist/zone'; in polyfill.ts. I moved it to main.ts and it fixed my issue

Answer 4

I had the same error on old Safari browsers like 10.3 for me it was just a missing entry in the brrowserslist file.

ios_saf >= 10
Safari >= 10

source