10
Dec

Ionic – Black screen on iOS and Android device when using Live Reload

As well as running ‘ionic serve’ to test your app in a browser, it’s possible to test out your app on a device by using ‘ionic run’. This works fine, but it’d be nice to have a live reload on your device for whenever you make a change to your code. This also works fine until you run into an error, at which point you’ll be hankering for some console or server errors to help you out. Ordinarily see these in your browser, when using ‘ionic serve’.

Fortunately, in order to experience live reload, and to see these console/server errors in your terminal/Git Bash, Ionic have kindly provided us with these features.

ionic run -l -c -s

!!Black Screen!!

However…

When attempting to use these features on our devices, we we were faced with a black screen on our device, and that was the end of it. For a while, we had to make do with using $cordovaToast to display any errors as a pop up on the device screen – FAR from acceptable. Eventually, we figured out the problem (though admittedly, this took us a little longer than it should have)… We needed to disable our firewall.

Here’s the quick way to disable your firewall:

In Linux terminal:

sudo ufw disable

In Windows:

Go here: Control Panel\All Control Panel Items\Windows Firewall

Sure you’ll work it out from there.