Showing Blank White Screen

Any one have found a solution?
why the android_asset/www/ doesn’t became automatically my route when I ionic run andorid?

Fabio

Hi there guys. Been sitting with this whites screen for a while without checking the obvious. What puzzled me was that newer versions of Android worked fine but older versions(<= 4,4) would give this white screen. Upon a chrome inspect, when doing an ‘ionic run android’ I found the source of my anguish.

a javascript syntax error!

In one of my services upon revealing a function I accidently used a ‘,’ instead of a ‘:’

Hi, Please can I see a sample of the gruntfile ?:grin:

Sure thing. This is all we had:

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    jshint: {
      target: {
        src: "www/js/*"
      }
    }
  });
  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-jshint');
  // Default task(s).
  grunt.registerTask('default', ['jshint']);
};

With lots of research solved this error for my project,

$urlRouterProvider.otherwise(’/app/SET-TO-SOME-OTHER-PAGE’);

@ravish1507, I am having the same issue you had with WKWebView. Could you make it work with WKWebView?

Hi, i am pretty much new to ionic, coming from strong native iOS background. I have installed WKWebView plugin in my ionic app and found the WSOD, and it goes away when i uninstall the plugin. Which way is suggested ?, should i add WKWebView and go with workaround or to stick what i have (UIWebview) now.what are the odds.?

@ravish1507, just for the record, I finally got the WKWebView problem working. I could only resolve it after executing these instructions step-by-step.

Sharing my fix. In my case it was because one of the variables was not being defined during the constructor, but I was using it anyway (AdMob) so I moved it to event ionViewDidEnter to use it once screen was loaded and not when is loading.

For me it was a source js file with an uppercase letter, which was imported lowercase in the index.html. The browser emulation would work fine. The android versions also worked fine on a device if installed with the -lc option. Blank screen only shown in ios/android devices when installed standalone (with no watch to project files).

My own experience.
I’ve had this white screen of death on iOS only.
I still don’t get why, but the origin of the problem was that I had too many providers declared in a component constructor:

 constructor(public platform: Platform,
    public navCtrl: NavController,
    public alertCtrl: AlertController,
    public loadingCtrl: LoadingController,
    public authProvider: AuthProvider,
    public skillsProvider: SkillsProvider,
    public profileProvider: ProfileProvider,
    public favoritesProvider: FavoritesProvider,
    public messagesProvider: MessagesProvider,
    public matchingProvider: MatchingProvider,
    public avatarProvider: AvatarProvider) {

It was fine on Android, but would work on iOS. So I had to refactor my code to remove one provider and it went fine.
Crazy bug…

I tried this also but issue is not there
.
$stateProvider
.state(“main”,{
url : “/main”,
templateUrl : “templates/main.html”,
controller : “myCtrl”
})
In templateUrl I used / before templates like /templates/main.html . It works perfect with ionic serve. But when same app deploy on android it shows white blank screen. So guys compare your code with ionic templates.

The cause of error will be different for everyone so the solution will also be different. Try to use console to see the errors and fix according to it.

For me the error was coming on a Lenovo device but was working fine on all devices.
I used chrome://inspect/#devices inside chrome to see the errors and find out that the device was giving some error for function parameter

My function was like this

 $scope.NavigatePage = function(page, param ={} ) {
            $state.go(page, param)
                .then(function() {});
        };

and it was showing error for param parameter so I changed it to this

 $scope.NavigatePage = function(page, param ) {
            if(typeof param !== 'object') {
                param = {};
            }
            $state.go(page, param)
                .then(function() {});
        };

Thank you Jangla, that was the problem, the https… You made me happy :wink:

Save a lot of time by just testing your app in every browser you have

Oh my, what underrated advice! Thank you very much for this, after over a year in Ionic I encountered this for the first time today and didn’t realize how lucky I had gotten!

Testing different platforms is always a hassle, and much of that can be skipped by simply testing the browsers first and only testing the platform once it works on the corresponding browser.

Here’s another scenario you might find interesting. What if it works in the browser, in the iOS emulator, on your iPhone, on your iPad, but on neither of the iPhones of your 2 friends?

After a few minutes of scratching my head, I saw that all was fine on iOS10, but not on iOS9. That led me to look at my code again and lo and behold I used the "let" keyword instead of "var" on one instance. Turns out webkit in iOS9 does not fully support ES6. Template strings work however, which is great!

i have same problem in iPhones only am getting white screen on back button navigation tried with $timeout it did not help . Here is my environment on iOS.

I am using ionic v1

cli packages:

@ionic/cli-utils  : 1.8.1
ionic (Ionic CLI) : 3.8.1

global packages:

Cordova CLI : 7.0.1 

local packages:

Cordova Platforms : ios 4.4.0
Ionic Framework   : unknown

System:

ios-deploy : 1.9.1 
ios-sim    : 5.0.8 
Node       : v6.10.3
npm        : 3.10.10 
OS         : macOS Sierra
Xcode      : Xcode 8.3.2 Build version 8E2002

am unable to see any white screen on android.

can someone give me solutions on it, i have tried all the above solutions none have worked.

Hi Dave
this might help you to recognize the actual problem at that time, you just need to attach your device with your computer and then run your application on your device, open browser and type

chrome://inspect/

you will see this type of screen

after that click on inspect a new window will appear in that window click on console you will see whats wrong, why its happening

Its helpful for android not for iOS. Chrome is unable to inspect iOS devices.White screen problem is in iOS only not on android tried similar scenarios on both devices, only iOS gets white screen.

Am getting this issue.
Error: [$rootScope:inprog] http://errors.angularjs.org/1.2.7/$rootScope/inprog?p0=%24digest

please can you show where i can find that line of code to add http