Unhandled promise rejection: Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten
Solution 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.
Solution 2
It worked for me when I updated my zone.js package to the latest version by running npm install zone.js@latest --save
.
Solution 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
Solution 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
qbolt
Updated on June 28, 2022Comments
-
qbolt almost 2 years
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, thezone.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 thezone.js
file is getting loaded before webpack loads the rest of thenode_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>
-
Matías Magni over 4 yearsThanks a lot, this bug was making me crazy!
-
FiringBlanks about 2 yearsThis fixed the issue for my localhost, but not for the live site.