PhoneGap Build - APK file gives blank screen - tutorial

[DarthLuch]

Hello,
I’m having an issue where when I try to run an APK file, it gives a blank/white screen. I’ve tried on both an Android device and Bluestacks… Both give a blank screen. I’m able to make the same project work on iOS fine though.

I thought it may be something with my app, so I tried with the “basic app” and get the same problem. All I do is:

ionic start cutePuppyPics --v2

I then can run it fine using “ionic serve”.

I then add it to my public GitHub repo, and import it into PhoneGap build. I build the APK and download it… But it gives blank screen on both Android device (Galaxy Note 5) and Bluestacks.

But the iOS version works fine.

I’m using: ionic 2.0.0-beta.25

[keithmichelson]

I’m having the same problem testing on a Nexus 5

[iignatov]

@DarthLuch

I’ve tried on both an Android device and Bluestacks… Both give a blank screen. I’m able to make the same project work on iOS fine though.

On which Android version are you testing (Ionic 2 supports 4.4 and up)? Could you provide more details, e.g. the output of ionic info? Are there any errors when debugging the app remotely?

[DarthLuch]

I’ve tried on two android devices: Galaxy Note 5, which is on version: 5.1 and on Nexus 5, which is on Kitkat 4.4

Ionic info results:

Cordova CLI: Not installed
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
OS:
Node Version: v6.2.0

Note: I did try installing Cordova, but that doesn’t help the issue.

I haven’t done the “debugging the app remotely” yet. Do you need me to do that? Since it was straight-forward to duplicate the problem, I was hoping that wouldn’t be needed (I’m very new to Ionic and mobile app and mobile webapp development).

[iignatov]

@DarthLuch Could you also tell which version of the framework are you using in your app (although I guess that when it’s working with ionic serve it’s unlikely to be a framework problem)? The usual reason for blank/white screen is an error so you should try to find more about it. I haven’t used PhoneGap Build but since it’s working with ionic serve and on iOS I guess that it might be also something related to it.

[DarthLuch]

When you say “which version of the framework”… How do I see that? I tried searching online, but all I found was the ionic version itself.

I did what you suggested regarding debugging the app remotely, and I saw these errors in the console:

file:///android_asset/www/build/js/zone.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///android_asset/www/build/js/app.bundle.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///android_asset/www/build/js/es6-shim.min.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///android_asset/www/build/js/Reflect.js Failed to load resource: net::ERR_FILE_NOT_FOUND

I tried researching for those errors, but couldn’t resolve them… Any ideas?

On another note… When I do the same process of just building a sample tabs app and using PhoneGap Build to make an APK file, but using Ionic version 1 instead of version 02… It works fine and I don’t have this problem.

[iignatov]

@DarthLuch

When you say “which version of the framework”… How do I see that? I tried searching online, but all I found was the ionic version itself.

You should run ionic info from inside of your projects folder (see the output below):

C:\Projects\MyAppProject>ionic info

Your system information:

Cordova CLI: 6.1.1
Gulp version:  CLI version 1.2.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
OS: Windows 8.1
Node Version: v5.8.0

@DarthLuch

I did what you suggested regarding debugging the app remotely, and I saw these errors in the console: …

It seems that the resulting APK doesn’t contain the required JS files to run the app. However I’m not sure why PhoneGap Build is not including these, probably an additional configuration is needed (ionic build android works fine). Maybe the following post will help you to setup your PhoneGap Build properly:

Building Ionic 2 Beta 7 Apps With PhoneGap Build

Thought I’d post the instructions here in case it helps anyone: Copy the resources folder from the root directory and paste it into the www folder. Copy the config.xml file from the root directory and paste it into the www folder. Open the newly pasted config.xml file and delete the entire xmlns:cdv namespace from the widget tag. Add the Phone Gap namespce to the widget tag: xmlns:gap="http://phonegap.com/ns/1.0" Add the version code to the widget tag: versionCode="1" Update an…

@DarthLuch

When I do the same process of just building a sample tabs app and using PhoneGap Build to make an APK file, but using Ionic version 1 instead of version 02… It works fine and I don’t have this problem.

Ionic 2 is different than Ionic 1, so you shouldn’t expect that something that works in Ionic 1 will work without modifications in Ionic 2 (including the build process).