Ionic Framework crashes on start - Phonegap, on Pantech Burst

Whenever I run my project “cordova run android”, the app installs itself in my Pantech Burst phone without any console error. However, the app begins with a black screen and crashes 5 seconds later. I have made sure that my custom Angular HTML elements were validating, and even tested my Ionic-Framework powered HTML/CSS/Javascript files on both Firefox and Chrome browsers without any sort of console errors or even warnings.

This problem has been bugging me for quite some time now. To further make sure that my codebase isn’t the one giving issues, I ran the test seed project found here. Any possible fix for this problem? My phone runs Android 4.0.4.

You can view some of my project coding here.

1 Like

I had a similar problem, which turned out to be a configuration issue (I had tried to change the icon, and the resource was not placed in the package by Cordova).

But if you’re not seeing any of your Angular/Ionic code, chances are that it’s a configuration issue.

Thank you for the response. Would you happen to know how I can debug the HTML/CSS/Javascript code Cordova is trying to display on the phone?

Also, to add to this, what’s weird is when I use code like so, it displays perfectly.

<div class="bar bar-header bar-stable">
  <h1 class="title">bar-stable</h1>
</div>

However, when I use Angular custom code like provided so on the Getting Started guide

    <ion-side-menus>
    <ion-pane ion-side-menu-content>
    </ion-pane>
    <ion-side-menu side="left">
    </ion-side-menu>
  </ion-side-menus>

It shows a black screen for about 5-6 seconds and then crashes.

Hasn’t Google release some new Chrome developer tools that allow you to debug the code on a device?

FYI : I put your code sample here to see it working. http://codepen.io/calendee/pen/ncymi Without the actual page content, I can do much more with it.

So I can simply use Chrome Developer Tools (F12) to test this on a mobile device? I never knew that. Also, I was planning of testing this application by putting it on my server as a mobile website and trying to see if my phone’s browser can actually show the page on its mobile browser or not.

CodeShare was not rendering my code, so I organized how my files are actually arranged (and used CDN’ed Ionic Framework links for its bundled Javascript and CSS files) into this shareable gist. My code can now be seen in a more arranged fashion here.

I also posted my working code in my server. So far, only layout.html (which contains the Javascript/CSS imports), home.html (default injected Angular view), and bible.html (used to search Bible passages) are the only ones that I have worked on. You can view it here.

See this : https://developers.google.com/chrome-developer-tools/docs/mobile-emulation#emulate-devices and https://developers.google.com/chrome-developer-tools/docs/remote-debugging

Unfortunately the Pantech Burst is Gingerbread Android (2.3.5), so Chrome for Android won’t work, since it only works with Ice Cream Sandwich and up (4.0+). This means you won’t be able to do remote debugging as @Calendee suggested with that device, however you can do mobile emulation.

@peter I got the Ice Cream update for Pan tech Burst. As stated above, my phone is currently Android version 4.0.4 (Ice Cream Sandwich).

@calendee I have used Google Chrome’s emulation tools and uploaded my files into my server for testing on a browser, and again, same thing - everything is working right and the console is returning no errors, and yet, when I package it into Phonegap, app crashes.

Oh cool, from a quick Googling I thought the device was Gingerbread only.

You could either view the Android log with the Android Development tools or use this app to see why it’s crashing. https://play.google.com/store/apps/details?id=com.nolanlawson.logcat

If you search by your package name it should be pretty apparent what the crash error is.

1 Like

For iOS development, the “console” in Xcode is useless for JavaScript errors. It’s mandatory to have access to the real console in Safari. Hopefully, the tools Peter suggested can help you out on Android.

@peter Thank you. I will try making an Android Project with Android Developer Tools rather than plainly using the command-line so I can debug whatever errors come up. I will post whatever errors that show up here if I cannot find a fix for it online.

@Calendee I truly hope it does. I’m also making an IOS port of my app, so I hope it also works there.

I got this problem coming out of Android Developer Tools, after building my project using the Cordova Command Line Tools and trying to run it on my Pantech Burst device. Any suggestions? I have been stuck at this problem and my two culprits would be the “Fatal Signal 11” error and “Falling back on PROMPT mode since _cordovaNative is missing…” error. Any suggestions?

Also, I am starting to wonder whether Cordova/Phonegap crashes because it tries to validate the HTML, in this case of which it might fail because I am using custom angular-ionic powered HTML code? Would that be the case? Whenever I use divs, my app works, but whenever I use custom angular code like so:

<ion-side-menus>
        
        <!-- Center Content -->
        <ion-pane ion-side-menu-content>
            <!-- Header Bar -->
            <ion-nav-bar animation="nav-title-slide-ios7" type="bar-stable"></ion-nav-bar>
            <!-- Where views are injected -->
            <ion-nav-view></ion-nav-view>
        </ion-pane>
        
        <!-- Left Menu -->
        <ion-side-menu side="left">
            <ion-header-bar class="bar bar-header bar-positive" title="'Main Menu'"></ion-header-bar>
            <ion-content has-header="true" class="side-menu-buttons list">
                <a class="item item-icon-left" href="layout.html#/home"><i class="icon ion-home"></i>Home</a>
                <a class="item item-icon-left" href="layout.html#/bible"><i class="icon ion-bookmark"></i>The Bible</a>
                <a class="item item-icon-left" href="layout.html#/about"><i class="icon ion-person"></i>About WJF</a>
                <a class="item item-icon-left" href="layout.html#/daily"><i class="icon ion-android-mail"></i>From the Pastor's Desk</a>
                <a class="item item-icon-left" href="layout.html#/map"><i class="icon ion-map"></i>Location</a>
                <a class="item item-icon-left" href="layout.html#/events"><i class="icon ion-calendar"></i>Events</a>
                <a class="item item-icon-left" href="layout.html#/small_group"><i class="icon ion-person-add"></i>Small Groups</a>
                <a class="item item-icon-left" href="layout.html#/youtube"><i class="icon ion-videocamera"></i>Youtube Channel</a>
            </ion-content>
        </ion-side-menu>

    </ion-side-menus>

It crashes. Why? This is a truly tricky problem.

What version of Ionic are you using? I know at one point I encountered an error with Android 4.0 where the list item’s right arrow being set by :after was causing the phone to crash. This is why grade-b and grade-c browsers do not get the Ionicons right arrow by default, as set here: https://github.com/driftyco/ionic/blob/master/scss/_items.scss#L423

Try not using any icon fonts and see if that makes a difference.

Thank you for the quick response, @adam. I will try using your suggestion. I am using the latest Ionic build - v0.9.26 “rabbit”.

@adam You were right! The app now works without me putting the icons. Is there any possible fix for this? I know that this has to be a CSS problem because Font Awesome works perfectly in my device with another build/version of an app I made.

Would there be any fix on this matter concerning the CSS code?

Would you be able to figure out which icon is causing the issue? Or what scenario is causing the issue? Hopefully the fix is only CSS and not the build tool of ionicons. Thanks

The problem seems to be with all icons, since I have tested them all individually on the menu bar, all causing the app to crash. However, the menu icon (triple dash), which comes by default for side menus, do not seem to cause a crash in the app (though I don’t know whether the “menu” icon is a part of the Ionicons pack or just designed with pure CSS).