Ionic white screen on IOS startup - ionic-framework

I'm developing an app with Ionic in version 3 but I'm having a problem with the build for IOS, just for IOS.
For several days I researched and did not find a solution to my problem, able to compile the last two versions without problem, but now that I need to release another version, but it is not going.
Only the build for iOS is giving trouble.
The problem
After the build, testing on a real device, the application enters the splashscreen and exits, entering a white screen that does not come out at all.
This occurs only in the build with the --prod flag. When I run in debug mode it works perfectly, with livereload and everything else.
Information
In the XCode console the only thing I see is all startup, and when the app is locked, on the white screen I see: TIC Read Status [10: 0x0]: 1:57 and TIC Read Status [11: 0x0]: 1:57
Any attempt to help is welcome. Thanks in advance!

I had a similar issue and nothing seemed to be working.
In the end, I added the browser as a platform.
ionic cordova platform add browser
Then, I tried to run that as production and it was from there, that I was able to diagnose the problem more, because the errors were shown then in the console.
ionic cordova run browser --prod --release
I didn't have much luck with XCode showing me and real errors.

I got a similar issue recently. Are you using ionic SplashScreen plugin? Can you try performing a clean installation after deleting node_modules, platforms and plugins directories.
If it didn't work update your app.component.ts like this.
import { SplashScreen } from '#ionic-native/splash-screen';
export class MyApp {
...
constructor(... public splashScreen: SplashScreen, ...) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
...
setTimeout(() => {
this.splashScreen.hide();
}, 2000);
...
});
}
In your config.xml set this perference.
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="ShowSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="3000" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="FadeSplashScreen" value="false" />

Related

Browser-Could not XHR config.xml: Not Found

When i try to deploy my ionic app to web, i get this error:
cordova.js:866 [Browser][cordova.js][xhrStatusChangeHandler] Could not
SplashScreenProxy.js:131
[Browser][cordova.js][xhrStatusChangeHandler] Could not XHR config.xml: Not Found SplashScreenProxy.js:131
The Splash Screen component is available only as Ionic Native component, so we can't use it inside browser, until ionic 4. Now, you can test in the terminal like this:
$ ionic cordova build browser
$ ionic serve --cordova --platform browser
After that config.xml is still not found, so I just copy to this folder:
$ cp config.xml platforms/browser/platform_www
Or just copy manually the file config.xml from your app folder and paste in the directory platforms/browser/platform_www
There will be another error on the browser console:
GET http://localhost:8100/screen 404 (Not Found)
This error is because on the config.xml file the value for SplashScreen is "screen" (or splash in older ionics)
<preference name="SplashScreen" value="screen" />
If you change value for an image name, like "logo.png"
<preference name="SplashScreen" value="logo.png" />
and put that file in the same directory (/platforms/browser/platform_www) then you will get a splash image on the browser (I used chrome for this test and it worked)
For anyone using Angular that already has config.xml in /platforms/www, this is what worked for me. Open up angular.json and look for the projects/APPNAME/architect/build/options/assets property and add an entry to tell Angular where to find config.xml. Here is what my assets array ended up looking like:
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "config.xml",
"input": "",
"output": "/"
},
{
"glob": "**/*.svg",
"input": "../../node_modules/ionicons/dist/ionicons/svg",
"output": "svg"
}
]
After that the splashscreen appears, but I get a 404 for "/screen" because of the config now looking for a splashscreen image that isn't there. I don't want to change this for Android and iOS, but in the browser I just want to point it at an image, so I added the following node in config.xml, immediately before the SplashScreen preference (adding it after doesn't work).
<platform name="browser">
<preference name="SplashScreen" value="/assets/images/splashscreen.jpg" />
<preference name="SplashScreenWidth" value="600" />
<preference name="SplashScreenHeight" value="300" />
</platform>
<preference name="SplashScreen" value="screen" />
Note that I have to specify a width and height, which you don't need to do for Android or iOS.
You may need to run ionic cordova prepare browser to copy the config into the right folder (or manually copy it to /platforms/browser/www).
And voila! That should do it.

ionic 2 blank screen error (sometime black/white) along with Application Error on Android

Getting this error:
Displayed splash.
Displayed black/White Screen.
Application Error!
"ionic info" output..
Working Solution:
adding these to config.xml
<preference name="loadUrlTimeoutValue" value="60000" />
<preference name="AutoHideSplashScreen" value="false" />

Ionic Splashscreen - How to remove fade?

I have the cordova splashscreen plugin working in my ionic project - except that I don't want the spashscreen to fade in. I've got the following in my config file but it doesn't seem to make any difference:
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="1000" />
<preference name="SplashMaintainAspectRatio" value="false" />
<preference name="SplashShowOnlyFirstTime" value="true" />
<preference name="FadeSplashScreen" value="false"/>
<preference name="FadeSplashScreenDuration" value="0"/>
The splash screen still fades in for 3 seconds. What am I missing?
I'm using Cordova version 5.4.1 and version 3.2.2 of the splashscreen plugin.
<preference name="SplashScreenDelay" value="6000"/>
Add this in your config.xml. and adjust its value as required.
Earlier you were setting value of FadeSplashScreen to false , which was good because you did not want your splashscreen to fade in.But that was also the reason why any changes in your FadeSplashScreenDuration was not working.

Splash screen in ionic framework cordova not working

This is my code
angular.module('starter.controllers', ['ngCordova'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
setTimeout(function () {
navigator.splashscreen.hide();
}, 500);
});
})
Are you trying to hide the splash screen? If you are, why not set up your splash to be a blank image? Find a high res blank png and run the command ionic resources --splash and this will generate your splash image for all the devices.
Have a look a Cordova's documentation or the documentation on npm repository: you might need to set some preferences in config.xml.
First, the following is not mentioned on the first site but it might solve your problem:
<preference name="SplashScreen" value="screen" />
Maybe you could also have to change some settings such as disabling autohide (you already hide the splash screen manually when you hide your app so it shouldn't be a problem) :
<preference name="AutoHideSplashScreen" value="false" />
Note :
As Joseph Ocasio already mentioned, don't forget either to generate your resources with the Ionic CLI.
To generate all (application icons + splash screen images) :
ionic resources
To generate splash screen images only :
ionic resources --splash
Be sure that you have got already installed the plugin cordova-splash-screen (cordova plugin add cordova-plugin-splashscreen --save)
Then check you config.xml file and add this
<preference name="FadeSplashScreen" value="true" />
<preference name="FadeSplashScreenDuration" value="1000" />
<preference name="Fullscreen" value="false" />
It should be work :)

How to Use Plugins with PhoneGap Build 3.x?

I am writing a PhoneGap Build 3.x program, and cannot figure out how to properly configure my config.xml and index.html files to access any of the plugins. Here is my config.xml file:
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "org.kirsches.PGB"
version = "1.0.0">
<name>PhoneGap Build Test</name>
<description>PhoneGap Build Test</description>
<author href="http://www.kirsches.org" email="mitch#kirsches.org">
Mitch Kirsch
</author>
<preference name="phonegap-version" value="3.1.0" />
<preference name="orientation" value="default" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="false" />
<preference name="android-minSdkVersion" value="7" />
<gap:platform name="android" />
<gap:plugin name="org.apache.cordova.device" />
<icon src="icon.png" />
</widget>
and here is my index.html file:
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap Build Test</title>
<script src="cordova.js"></script>
<script src="phonegap.js"></script>
<script >
document.addEventListener('deviceready',
onDeviceReady,
false);
function onDeviceReady() {
alert("using PhoneGap 3.1.0");
alert("model = " + device.model);
}
</script>
</head>
<body>
<h2>PhoneGap Build Test</h2>
</body>
</html>
The "using PhoneGap 3.1.0" alert fires, then the application hangs on my Android device. Am I incorrect in assuming that I don't need to set up an AndroidManifest.xml file, since I am using PhoneGap Build (it is my understanding that PhoneGap Build generates the AndroidManifest.xml file from my config.xml file)? Or, am I missing something in my config.xml file (it is my understanding that the feature tag is no longer used by PhoneGap 3.x)?
Thank you to anyone who can show me my error in the above two files.
The only odd thing is the fact you include phonegap.js AND cordova.js. Pick one, it doesn't matter, as PhoneGap Build simply injects the correct file for you (as long as you have one of those tags). So in case you have: don't include the actual files.
Hope this makes a difference..
Eddy
Two things had to be changed in my code:
As Eddy correctly pointed out, I just needed phonegap.js or cordova.js (but, this was not causing my hanging problem).
I had to delete (uninstall) my app on my Android device and then re-install it via my bar code reader app (I use QR Droid). I have enabled debugging and hydration on my app (since I am in the early stages of development), and I am guessing that a prior hydration operation must have corrupted something in my app. The hanging problem occurred on two different Android devices, with the interesting scenario of the app simultaneously working correctly on Android device # 1 (since I had already done the delete and re-install on it) and not working on Android device # 2 (since I had not yet done the delete on re-install on it).
Two lessons I learned from this are:
You can't count on the hydration process to work all of the time!
Unless you are in the habit of changing the name of your application each time that you upload it to PhoneGap Build, clicking on the "Install" or the "APK" buttons or the bar code on the PhoneGap Build web page will bring down the most recent version that has been stored in Amazon S3, which might not be the most recent version that you uploaded to PhoneGap Build!
Mitch