ionic-framework: Popover Dismiss Causes “RangeError: Maximum call stack size exceeded” on Android Device

I am using ionic2 beta8.

I have copied exact usage example from http://ionicframework.com/docs/v2/2.0.0-beta.8/api/components/popover/Popover/#usage

The only thing I changed is I have created separate files for popover.ts popover.html.

After all those changes everything worked fine in browser. But when I test that in Android device, when I try to dismiss the popover (either by calling this.viewController.dismiss() method or clicking on backdrop) I see that UI hung up and nothing happens.

I checked logs in Android Monitoring tool then I found following exception in log.

---

[INFO:CONSOLE(34947)] "EXCEPTION: Error in ./PopoverCmp class PopoverCmp - inline template:0:14", source: file:///android_asset/www/build/js/app.bundle.js (34947)
[INFO:CONSOLE(34947)] "ORIGINAL EXCEPTION: RangeError: Maximum call stack size exceeded", source: file:///android_asset/www/build/js/app.bundle.js (34947)
[INFO:CONSOLE(34947)] "ORIGINAL STACKTRACE:", source: file:///android_asset/www/build/js/app.bundle.js (34947)
[INFO:CONSOLE(34947)] "RangeError: Maximum call stack size exceeded
    at Object.re.RequireObjectCoercible (file:///android_asset/www/build/js/es6-shim.min.js)
    at Object.re.ToObject (file:///android_asset/www/build/js/es6-shim.min.js:10:4947)
    at Function.keys (file:///android_asset/www/build/js/es6-shim.min.js:10:24378)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69658:27)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)", source: file:///android_asset/www/build/js/app.bundle.js (34947)
[INFO:CONSOLE(34947)] "ERROR CONTEXT:", source: file:///android_asset/www/build/js/app.bundle.js (34947)
[INFO:CONSOLE(34947)] "[object Object]", source: file:///android_asset/www/build/js/app.bundle.js (34947)
[INFO:CONSOLE(260)] "Uncaught EXCEPTION: Error in ./PopoverCmp class PopoverCmp - inline template:0:14
ORIGINAL EXCEPTION: RangeError: Maximum call stack size exceeded
ORIGINAL STACKTRACE:
RangeError: Maximum call stack size exceeded
    at Object.re.RequireObjectCoercible (file:///android_asset/www/build/js/es6-shim.min.js)
    at Object.re.ToObject (file:///android_asset/www/build/js/es6-shim.min.js:10:4947)
    at Function.keys (file:///android_asset/www/build/js/es6-shim.min.js:10:24378)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69658:27)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)
ERROR CONTEXT:
[object Object]", source: file:///android_asset/www/build/js/zone.js (260)
Debugger is no longer active

Here is code I am using

import { Component } from '@angular/core';
import { App, NavController, NavParams, MenuController, Popover, ViewController } from "ionic-angular";
import { Storage, LocalStorage } from 'ionic-angular';

import { AuthService } from "./../../../services/user/auth";
import { AuthModel } from "./../../../models/user/auth";


@Component({
    template: `
        <ion-list>
            <ion-list-header>Welcome</ion-list-header>
            <button ion-item (click)="onLogout($event)">Logout</button>
        </ion-list>
    `,
    providers: []
})
class PopoverPage {
    private storage;

    constructor(private viewController: ViewController, private nav: NavController, private authService: AuthService, private auth: AuthModel) {
        this.storage = new Storage(LocalStorage);
    }

    close() {
        console.log('On Close Popover');
        this.viewController.dismiss();
    }

    onLogout() {
        this.close();
    }
}

@Component({
    templateUrl: "build/pages/app/dashboard/dashboard.html",
    providers: []
})
export class DashboardNewPage {
    private storage;

    constructor(protected app: App, protected nav: NavController, protected navParams: NavParams, private menu: MenuController, private authService: AuthService, private auth: AuthModel) {
        this.storage = new Storage(LocalStorage);
    }

    public onPopover(event) {
        let popover = Popover.create(PopoverPage);
        this.nav.present(popover, {
            ev: event
        });
    }
}

onPopover function is getting called when nav button is triggered and that markup is present in dashboard.html

This page is rootPage of app and it gets loaded immediately.

Last thing I see in logcat is ‘console.log(‘On Close Popover’);’ execution. After that it shows exception.

Let me know if I did something wrong here. Please note that this works perfectly fine in browser. But fails in android device.

---

I guess that the possible cause might be that:

The object that is passed to ToObject() method is too big - this will work on a desktop browser because it has bigger stack so it could handle it but obviously fails on mobile.

It might be an issue with the es6-shim ToObject() method (either a bug or it’s not very effective or not optimized) - most desktop browsers should have a native implementation of this method and therefore it works fine but obviously on mobile there’s no native implementation yet.