Zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten.

[RaleS]

Moved from angular/angular#11788

http://plnkr.co/edit/xElagaMcBNbYvc7k7Enh?p=preview

Zone breaks when using Bing Maps. The global.promise gets overwritten by Bing Maps. The error is delayed 2 secs - see console output.

[jtmalinowski]

Bing overwrites Promise using a separately-loaded JS file, so order of execution is not going to be predictable. The only possibilities I see are to load zone.js after Bing maps are completely loaded or to rerun zone.js after Bing maps are loaded. Unfortunately, just disabling the check (Zone.assertZonePatched = () => {};) as a workaround does not pass a simple smoke test.

[yann510]

Currently running into a similar issue of yours, but I am not using Bing Maps. Being pretty new to web development, I find it very hard to determine which plugin is causing this exactly. What would be the best way to find what is wrong?
Here is the error stack trace:

main.browser.ts:25 Error: Zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten.(…)
(anonymous function) @ main.browser.ts:25
u @ es6.promise.js:87
(anonymous function) @ es6.promise.js:100
a @ _microtask.js:18
ZoneDelegate.invoke @ zone.js:203
Zone.runGuarded @ zone.js:110
(anonymous function) @ zone.js:86

[henryng24]

@yann510 I was seeing this problem as well. At the end of the day, it's what Jakubmal mentioned: loading a separate JS file which may overwrite ZoneAwarePromise. Essentially, you want to ensure that there are no other JS files loading after zone.js which could result in ZoneAwarePromise being overwritten. This could be deliberately reordering the load time of your files, or considering if some JS files could non-deterministically be overwriting ZoneAwarePromise asynchronously.

[jtmalinowski]

@yann510 you would have to list all other libraries that you use so we can take a look
@henryng24 repatch kind of method might eventually be needed, but I want first understand the problem exactly before I start suggesting any solutions

[yann510]

@henryng24 I got to the root of why my issue was caused. It appears that when I updated some dependencies (notably angular from rc-6 to 2.0.0, zone.js from 0.6.17 to 0.6.25, rxjs from 5.0.0-beta.11 to 5.0.0-beta.12) and this is when I started getting the issue. Here is a link to my package.json config. With this config for some reason when I run npm install it install angular rc-6 at first and when I run npm update, this is where my issue comes in. Hope this helps track down the issue.

[IAMtheIAM]

Here's the fix: zone.js MUST be imported AFTER AppModule/AppModuleNgFactory, otherwise it can throw error "ZoneAware promise has been overriden" during bootstrapping.

This is because any module or component in your AppModule might actually override the ZoneAware promise. Loading zone.js after AppModule/AppModuleNgFactory ensures its loaded right before bootstrapping the app, with no possibility of being overridden.

App.bootstrap.aot example below:

/**
 * JIT Build
 * MAIN ANGULAR2 APP ENTRY POINT
 * This is where we bootstrap the Angular2 application
 */

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { decorateModuleRef } from './app-components/app/environment';
import { ApplicationRef } from '@angular/core';
import { bootloader } from '@angularclass/hmr';
import { Logging } from './app-components/services/utility.service';

/**
 * AppComponent and AppComponent Services
 */
import { AppModule } from './app-components/app/app.module';

/**
 * zone.js MUST be imported AFTER AppModule/AppModuleNgFactory, otherwise it will throw
 * error "ZoneAware promise has been overriden" during bootstrapping
 */
import 'zone.js/dist/zone';

if ('production' === ENV) {
   enableProdMode();
}
/*
 * Bootstrap our Angular app with a top level NgModule
 */

export function main(initialHmrState?: any): Promise<any> {

   return platformBrowserDynamic()
      .bootstrapModule(AppModule)
      .then(decorateModuleRef)
      .catch(function(err) {
         console.log('%c ERROR Bootstrapping Angular 2 JIT! \n', Logging.bold.teal);
         console.error(err);
      });
}

bootloader(main);

[rohan2934]

Got this error every time i run my web app

[LeParadoxHD]

Same here, but only in Safari <= 10.1

[JiaLiPassion]

@LeParadoxHD , could you create a reproduce repo? Thanks.

[LeParadoxHD]

@LeParadoxHD , could you create a reproduce repo? Thanks.

I can't make the project public, the only I know is that is caused by

import 'core-js/es/promise';

Which doesn't make so much sense due to my zone.js import is at the end of the polyfills file...

[JiaLiPassion]

@LeParadoxHD, sure, I don't have old version of safari, so could you just create an index.html and include core-js/es/promise and zone.js, to see whether can reproduce or not. And you may try to change the load order to check the behavior, thanks.