Recently, I updated my Angular application from version 8 to 9. After updating the packages and successfully compiling the application, I encountered an error message in the Chrome browser console:
Error: Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.
Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)
I attempted to resolve this issue by moving the zone.js import statement to the end of the file polyfills.ts and trying other suggestions, but unfortunately, they did not work.
This is how my polyfills.ts file looks like:
import 'core-js/es/reflect';
import 'hammerjs/hammer';
import 'zone.js/dist/zone'; // Included with Angular CLI.
This is the current version of Angular I am using:
Angular CLI: 9.0.3
Node: 10.16.0
OS: win32 x64
Angular: 9.0.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Ivy Workspace: Yes
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.900.3
@angular-devkit/build-angular 0.900.3
@angular-devkit/build-optimizer 0.900.3
@angular-devkit/build-webpack 0.900.3
@angular-devkit/core 9.0.3
@angular-devkit/schematics 9.0.3
@angular/cdk 9.0.0
@angular/flex-layout 9.0.0-beta.29
@angular/material 9.0.0
@ngtools/webpack 9.0.3
@schematics/angular 9.0.3
@schematics/update 0.900.3
rxjs 6.5.4
typescript 3.6.5
webpack 4.41.2
If anyone has any ideas or suggestions on how to resolve this issue, I would greatly appreciate it. Thank you.