Showing Blank White Screen

ionic-v1
21

can someone please explain how I post an issue? all I can seem to do is reply to threads

1 Like
22

Wanted to share my solutionā€¦

I was getting the same maddening white screen. I set up my android device to debug through Chrome Canary on my Mac, and was able to see the javascript console while it ranā€¦ looked like it was having trouble loading key data from an external url!

A little research showed me that this is a feature of Android Cordova, not a bugā€¦ and that the solution is to add the Whitelist Cordova plugin to ionic, whitelist the domains in question in config.xml, and rerunā€¦ that solved the problem!

The bigger mistake was that I was using resolve sections in my ui-router states, but had never thought about what to do if the promises in question never resolve!

2 Likes
23

Thanks, it is what I need

24

This may help to debug: initialize angularjs manually and catch the exception. like this:

<body>
  <ion-nav-view></ion-nav-view>
  <script>
    try {
      angular.element(document).ready(function() {
        angular.bootstrap(document.getElementsByTagName('body'), ['myApp']);
        console.log('started');
      });
    } catch(err) {
      alert(err.message);
    }
  </script>
</body>
1 Like
25

I too ran into this issue and thought Iā€™d share my fix. I was testing in a Genymotion virtual box which makes it easier. Run up the app, open a Chrome window on desktop and navigate to: chrome://inspect

You can then inspect your webview on the virtual device. I found that I was referencing a ton of external CDN libraries for things like angular-resource, angular-touch etc but using this:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-cookies.min.js"></script>

ā€¦wonā€™t work. You need to ensure any external paths are absolute:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-cookies.min.js"></script>
8 Likes
26

Thanks Jangla. I have been struggling all day with this white screen. Went through a lot of trial and error myself, but you made my day. When uploading your app or emulating you must include the ā€œhttpsā€ before the script source path.

1 Like
27

ā€œYou shall not get sloppy and forget to finish your lines with semi-colonsā€

Thanks a lot for the tip! JSHint pointed out I have forgot to add semi-colons to 2 lines in a service.

28

This solution worked for me, Jangla! Thank you so much for this!

1 Like
29

Simply piling on here. None of the listed solutions worked for me. My app worked fine in ā€œionic serveā€ but showed a blank white screen in ā€œionic emulate iosā€. However, once I used ā€œionic resourceā€ to create the icons and splash screens for ios (also android separately) then everything started working. Magic.

30

I had this issue and it ended up being a syntax issue (function wasnā€™t properly constructed) in one of my Angular services. For some reason the app worked fine on iOS9 with the issue, but iOS 8 didnā€™t like it. I found the issue debugging the app in Safari via the iOS 8 simulator.

31

No conozco mucho ingles asĆ­ que lo dirĆ© en espaƱol y lo traducirĆ© como puedaā€¦

tuve el mismo problema y fue porque una de mis script estaba mal establecido
la carpeta se llamaba js/Services/factoy.js
mi referencia fue
al parecer esto funciona bien en windows pero en sistemas basados en Unix como linux y android causa errores

i had the same issue and was because one of my scripts was bad configurated
the folder is called js/Services/factory.js
and my reference was
seems this work in windows OS but in Unix system like Linux and Android maybe throught errors

32

This helped me .Thanks :smile:

1 Like
33

Thank you. Using https://github.com/apache/cordova-plugin-whitelist via ionic plugin add cordova-plugin-whitelist and configuring the plugin and CSP solved this for me on Android!

34

I had the white screen issue on Android only. So what I did to solve this issue was to remove the platform by running ionic platform rm android and adding at again with ionic platform add android When I built and ran it again the app loaded perfectly. Although it might not work in all cases, its definitely worth a try.

35

In my case the white screen of death was fixed by removing leading slash in the js file path, ex:
src=ā€œjs/app.jsā€ <-- All good
src="/js/app.js" <-- WSOD

triky one

:sweat_smile:

1 Like
36

I had a same problem, it was happened when i navigate to a tab, in my case, i removed RTL direction in my ā€˜bodyā€™ css class and added it to a style in ion-view tag.

37

Thanx jkangā€¦your post led me closer to solving the whitescreen of death!

38

my solution to the problem:
At first, i followed through this thread and implemented all suggested approaches but still the whitescreen came up when i was navigating to a specific state in my app. So, i did more research and found a weird solution to the problem. I happened to use **CacheFactory with angular-cache ** and had declared it within ionicPlatform.ready() function. Simply put your declarations outside of this function.

39

I had the same issue in my app. Everything looked fine but android. I debugged the whole thing remotely but nothing changed and no error was in the console. After I found a post that indicates problems with ui-view. In fact you have to replace ui-view with ion-nav-view. As I did this it worked as expected.

40

Yep that was it for me. Thanks!