Ionic-app-scripts: Uncaught Error: Zone.js has detected that ZoneAwarePromise

Created on 16 Nov 2016  路  15Comments  路  Source: ionic-team/ionic-app-scripts

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:

  1. Update app-script to the lastest version:

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

  1. Run project on device:
    ionic run android

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

picture cleever
👍4

Most helpful comment

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

picture jthoms1 on 7 Dec 2016
👍2

All 15 comments

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

cleever picture cleever on 17 Nov 2016

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

zafeirism picture zafeirism on 21 Nov 2016
👍1

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

RyanMcDonald picture RyanMcDonald on 21 Nov 2016
👍1

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 https://github.com/angular/zone.js/issues/465 but the solution cannot be applied here as polyfills are added by the build system.

masimplo picture masimplo on 5 Dec 2016

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

jthoms1 picture jthoms1 on 7 Dec 2016
👍1

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>
masimplo picture masimplo on 7 Dec 2016

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

jgw96 picture jgw96 on 7 Dec 2016
👍1

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

masimplo picture masimplo on 7 Dec 2016

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

I opened an issue on ionic-native about this:

https://github.com/driftyco/ionic-native/issues/810

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

cleever picture cleever on 7 Dec 2016
👍1

@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?

masimplo picture masimplo on 7 Dec 2016

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

RyanMcDonald picture RyanMcDonald on 7 Dec 2016
👍1

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

cleever picture cleever on 7 Dec 2016

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.

masimplo picture masimplo on 7 Dec 2016
👍2

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.

cleever picture cleever on 7 Dec 2016

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

jthoms1 picture jthoms1 on 7 Dec 2016
👍2
Was this page helpful?
0 / 5 - 0 ratings

Related issues

jgw96 picture jgw96  路  4Comments
hermitdemschoenenleben picture hermitdemschoenenleben  路  3Comments
jgw96 picture jgw96  路  3Comments
brandyscarney picture brandyscarney  路  4Comments
janpio picture janpio  路  3Comments