Android blank screen on update from 3.6->3.7.1 or 3.8.0

[golear]

I just updated my app from ionic-angular@3.6.0 => 3.7.1, following the directions listed in the change log.
Afterwards I tried ionic cordova run android and it goes through the whole build process with no errors, then it launches the app but all I get is a blank white screen. When I open the Chrome DevTools I see literally nothing, no source, no elements, nothing in the console.

I killed the app and tried to relaunch from the device but then it gives me an Application Error:
The connection to the server was unsuccesful. (file://android_asset/www/index.html)

Anyone else have this experience or have any ideas?

[Sujan12]

ionic serve is still working?

What is your ionic info output?

[mwiley63]

Indeed ionic info may pinpoint the bug.

I had a similar issue to using @ionic/app-scripts 2.4.1 and ionic angular 3.7.1. Upgrading to 3.0 resolved the issue for me.

[golear]

Apologies for the late response, I had some other work that needed to be wrapped up before I could return to upgrading Ionic.

TBH I’m not sure if anything changed about ionic serve as much of my app is native dependent and I don’t use ionic serve at all.

Here is the result of ionic info:

cli packages: (C:\Users\golear\Repos\MobileShoppingAssist\node_modules)

    @ionic/cli-utils  : 1.13.1
    ionic (Ionic CLI) : 3.13.1

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.7.1

System:

    Android SDK Tools : 26.1.1
    Node              : v6.11.4
    npm               : 3.10.10
    OS                : Windows 10

Misc:

    backend : pro

[golear]

Bumping this topic because after attempting to upgrade to 3.8.0 (from 3.6) I’m still encountering this issue.

ionic info:

cli packages: (C:\Users\golear\Repos\MobileShoppingAssist\node_modules)

    @ionic/cli-utils  : 1.16.0
    ionic (Ionic CLI) : 3.16.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.0.1
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.8.0

System:

    Android SDK Tools : 26.1.1
    Node              : v6.11.4
    npm               : 3.10.10
    OS                : Windows 10

Environment Variables:

    ANDROID_HOME : C:\Users\golear\AppData\Local\Android\sdk

Misc:

    backend : pro

[mhartington]

Can you post more information? It doesn’t really tell us anything from just that.
What happens when you run build locally?
When you do a prod build, can you serve it locally?

[golear]

I’m not exactly sure what you mean by serve locally.

I’ve tried:

ionic cordova run android

ionic cordova run android --prod

ionic cordova build android

ionic cordova build android --prod

after running or putting the built .apk on my device from the above commands I get the same result, splash screen followed by white screen with no information in developer tools. I can however see my providers be initialized via the android monitor.

[mhartington]

So when this happens, I tend to suggest doing the following.

npm run build --prod Produce a production build of your app

npm i -g httpster Just intalls a quick http server.

cd www Go in to your www directory

httpster to start the live server,

and Then open localhost:3333 in your browser and see whats up.
If you can, inspect the screen and then share some screenshots of the dev tools.

Also, kind of a shot in the dark, can you paste the $colors map in your theme file?

[golear]

Thanks for taking a look @mhartington

using npm run build --prod gave me an error, so I used ionic build --prod which I’m guessing is the same command.

After downloading and running httpster from the built www folder all I got in the browser was a blank screen and a ‘Page Unresponsive’ message:

I opened up the devloper tools and again I see literally nothing, not in elements, no source, no network activity on reload

This is the output I see from httpster

From my theme file:

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  favorite:   #69BB7B
);