Uncaught Error: Zone.js has detected that ZoneAwarePromise #401

cleever · 2016-11-16T10:56:43Z

Short description of the problem:

Prod build in a android device throw the following error at bootstrap time:

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

Steps to reproduce:

Update app-script to the lastest version:

npm install @ionic/[email protected] --save-dev or
npm install @ionic/app-scripts@latest --save-dev

Run project on device:
ionic run android
Open the app.

The screen becomes white and app doesn't load.
Inspecting the device shows the error above.

Which @ionic/app-scripts version are you using?

ionic/app-scripts 0.0.44

Roll-backing to 0.0.39 (my safe zone) resolves the issue.

The text was updated successfully, but these errors were encountered:

cleever · 2016-11-17T17:08:46Z

The issue sometimes appears in 0.0.39 too.

Switch back to 0.0.44. The error occurs only with crosswalk. Without crosswalk, I'm not able to reproduce the error.

ionic info

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.44
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v4.5.0
Xcode version: Not installed

zafeirism · 2016-11-21T15:10:47Z

I have the same issue which is reproducible even without crosswalk.

Ionic info:

Cordova CLI: 6.4.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
Ionic App Scripts Version: 0.0.44
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.4.0
Xcode version: Xcode 7.3.1 Build version 7D1014

RyanMcDonald · 2016-11-21T19:50:52Z

Same problem here, without crosswalk. It seems to be a race condition because it doesn't happen 100% of the time.

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.7
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.43
ios-deploy version: Not installed
ios-sim version: Not installed
OS: OS X El Capitan
Node Version: v6.0.0
Xcode version: Xcode 8.0 Build version 8A218a

masimplo · 2016-12-05T13:26:50Z

Any news on this? This happens to our app 8 out of 10 launches. It renders the app unusable as the app is not loaded after this error.
Are there any indications on what might be happening? Any workarounds?

I have found this related angular issue angular/zone.js#465 but the solution cannot be applied here as polyfills are added by the build system.

jthoms1 · 2016-12-07T14:41:51Z

Could you please provide us with the content of your index.html file?

masimplo · 2016-12-07T14:59:46Z

Sure here you go

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
	<meta charset="UTF-8">
	<title>MyApp</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<meta name="msapplication-tap-highlight" content="no">

	<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
	<link rel="manifest" href="manifest.json">
	<meta name="theme-color" content="#4e8ef7">

	<!-- cordova.js required for cordova apps -->
	<script src="cordova.js"></script>

	<!--DEVELOPMENT ONLY! REPLACE IN PRODUCTION-->
	<meta http-equiv="Content-Security-Policy" content="default-src 'self' gap: https://ssl.gstatic.com;
            connect-src 'self' ws: https://*.example.com;
            img-src 'self' data: https://*.example.com https://*.kissmetrics.com;
            style-src 'self' 'unsafe-inline';
            script-src 'self' 'unsafe-eval' 'unsafe-inline' gap: http://localhost:35729;">

	<!-- PRODUCTION CSP -->
	<!--<meta http-equiv="Content-Security-Policy"
   content="default-src 'self' gap: https://ssl.gstatic.com;
            connect-src 'self' https://*.example.com;
            img-src 'self' data: https://*.example.com https://*.kissmetrics.com;
            style-src 'self';
            script-src 'self' gap:;">-->

	<link href="build/main.css" rel="stylesheet">
</head>

<body>
	<!-- this Ionic's root component and where the app will load -->
	<ion-app></ion-app>



	<!-- The polyfills js is generated during the build process -->
	<script src="build/polyfills.js"></script>

	<!-- The bundle js is generated during the build process -->
	<script src="build/main.js"></script>
</body>

</html>

jgw96 · 2016-12-07T16:26:01Z

Hello everyone! Are you guys using any third party libraries in your apps? And if so, what are they?

masimplo · 2016-12-07T16:37:47Z

@jgw96 here are our dependencies:

    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic/storage": "1.1.6",
    "async-lock": "^0.3.8",
    "immutable": "3.8.1",
    "ionic-angular": "2.0.0-rc.3",
    "ionic-native": "2.2.7",
    "ionicons": "3.0.0",
    "jsnlog": "2.20.2",
    "lodash": "4.17.2",
    "moment": "2.17.0",
    "node-uuid": "1.4.7",
    "pouchdb": "6.0.7",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"

and here our plugins:

   "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard",
    "cordova-sqlite-storage",
    "cordova-plugin-camera",
    "cordova-plugin-network-information",
    "cordova-plugin-file",
    "cordova-sms-plugin",
    "cordova-plugin-inapppurchase",
    "ionic-plugin-deeplinks",
    "mx.ferreyra.callnumber",
    "cordova-plugin-compat",
    "cordova-plugin-inappbrowser",
    "cordova-plugin-file-transfer",
     "cordova-plugin-facebook4",
     "cordova-plugin-crosswalk-webview"

Also tried removing crosswalk (as it was mentioned it might be related) but that didn't make any difference.

cleever · 2016-12-07T16:50:52Z

Please, be aware of cordova-plugin-inapppurchase plugin is broken.

I opened an issue on ionic-native about this:

danielsogl/awesome-cordova-plugins#810

I got rid of this issue by removing crosswalk and inapppurchase plugin supported by ionic-native.

masimplo · 2016-12-07T17:03:11Z

@cleever so you are saying that you have confirmed that this issue is caused by cordova-plugin-inapppurchase?

I am confused, you removed crosswalk (why? was the issue still there after removing in-app-purchase?) also you are saying you removed in-app-purchase plugin (the actual plugin or just the wrapper code provided by ionic-native)?

Can you please provide more info?

RyanMcDonald · 2016-12-07T17:05:31Z

My issue was also resolved once I fixed the broken cordova-plugin-inapppurchase plugin by installing the forked version listed in @cleever's issue.

cleever · 2016-12-07T17:33:59Z

@masimplo
At first, I thought it was the app-script update.
So I downgraded, and the project worked again. But for a short time.

Then I started investigating the packages and plugins I had recently installed.
I started removing crosswalk. The application worked, the ZoneAwarePromise error was gone, but I realized that it was extremely unstable, with several problems of pages updating, the constructors were not called, in a random behavior. Sometimes it worked, sometimes not.

So I removed all the plugins and started installing them one by one and testing. Until isolating the in-app-purchase plugin.

The problem is not the ionic-native wrapper. But the plugin itself.
I think Ionic-native shouldn't support and recommend such a troublesome plugin. However is hard for ionic native team to always have an healthy plugin ecosystem.

About crosswalk, I've not tested my app again with crosswalk. But like I said above, ZoneAwarePromise only appeared to me with crosswalk, without crowsswalk and with cordova-plugin-inapppurchase installed, the app show no errors, but it was completely unusable.

masimplo · 2016-12-07T17:49:25Z

I just tried running the app again after removing cordova-plugin-inapppurchase (nothing else changed, including using xwalk) and it now has started successfully 5/5 times (used to start 2 out of 10). So I guess it is safe to say that this plugin is solely responsible for this behaviour. @jgw96 and @jthoms1 thanks for picking this up so quickly after I asked for your attention on the matter, it is greatly appreciated. @cleever thanks for updating the issue with the actual cause.

cleever · 2016-12-07T18:12:58Z

Great,

So I'm closing this issue, because it not seems to be an app-script issue nor a crosswalk issue with new app-script versions. This is a cordova plugin issue.

Thank you everyone.

jthoms1 · 2016-12-07T18:42:23Z

@masimplo and @cleever Thank you! This find is going to be a big help for other devs in our community.

cleever closed this as completed Dec 7, 2016

jpkraemer mentioned this issue Feb 2, 2024

[Snyk] Fix for 15 vulnerabilities jpkraemer/ionic-app-scripts#47

Open

jpkraemer mentioned this issue May 14, 2024

[Snyk] Fix for 2 vulnerabilities jpkraemer/ionic-app-scripts#51

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uncaught Error: Zone.js has detected that ZoneAwarePromise #401

Uncaught Error: Zone.js has detected that ZoneAwarePromise #401

cleever commented Nov 16, 2016 •

edited

Loading

cleever commented Nov 17, 2016 •

edited

Loading

Uh oh!

zafeirism commented Nov 21, 2016

Uh oh!

RyanMcDonald commented Nov 21, 2016

Uh oh!

masimplo commented Dec 5, 2016

Uh oh!

jthoms1 commented Dec 7, 2016

Uh oh!

masimplo commented Dec 7, 2016 •

edited

Loading

Uh oh!

jgw96 commented Dec 7, 2016

Uh oh!

masimplo commented Dec 7, 2016

Uh oh!

cleever commented Dec 7, 2016

Uh oh!

masimplo commented Dec 7, 2016

Uh oh!

RyanMcDonald commented Dec 7, 2016

Uh oh!

cleever commented Dec 7, 2016 •

edited

Loading

Uh oh!

masimplo commented Dec 7, 2016

Uh oh!

cleever commented Dec 7, 2016

Uh oh!

jthoms1 commented Dec 7, 2016 •

edited

Loading

Uh oh!

Uncaught Error: Zone.js has detected that ZoneAwarePromise #401

Uncaught Error: Zone.js has detected that ZoneAwarePromise #401

Comments

cleever commented Nov 16, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Short description of the problem:

cleever commented Nov 17, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

zafeirism commented Nov 21, 2016

Uh oh!

RyanMcDonald commented Nov 21, 2016

Uh oh!

masimplo commented Dec 5, 2016

Uh oh!

jthoms1 commented Dec 7, 2016

Uh oh!

masimplo commented Dec 7, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jgw96 commented Dec 7, 2016

Uh oh!

masimplo commented Dec 7, 2016

Uh oh!

cleever commented Dec 7, 2016

Uh oh!

masimplo commented Dec 7, 2016

Uh oh!

RyanMcDonald commented Dec 7, 2016

Uh oh!

cleever commented Dec 7, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

masimplo commented Dec 7, 2016

Uh oh!

cleever commented Dec 7, 2016

Uh oh!

jthoms1 commented Dec 7, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cleever commented Nov 16, 2016 •

edited

Loading

cleever commented Nov 17, 2016 •

edited

Loading

masimplo commented Dec 7, 2016 •

edited

Loading

cleever commented Dec 7, 2016 •

edited

Loading

jthoms1 commented Dec 7, 2016 •

edited

Loading