However i can’t use $cordovaSplashscreen.hide().
It doesn’t give any error after injecting $cordovaSpashScreen into app.run function,
whenever i try to use $cordovaSpashscreen.hide() inside, it gives this error:
“TypeError: navigator.splashscreen is undefined”
Any help?
Thank you in advance.
Have you installed the splash screen plugin? If not you need to run ionic platform add cordova-plugin-splashscreen
The reason you are getting the error is because navigator.splashscreen hasn’t been assigned, which is what the plugin does.
It says “cordova plugin add org.apache.cordova.splashscreen” on it’s documentation and i have already installed that.
Btw i tried to run your command but i got an error saying : Platform “cordova-plugin-splashscreen” not recognized as a core cordova platform. See cordova platform list.
The difference between cordova platform add .. and ionic platform add .. is the latter automatically adds the ionic plugin file which allows you to run ionic state restore which restores plugins and their config if you need to update your platforms for any reason.
Try ionic plugin add https://github.com/apache/cordova-plugin-splashscreen.git instead, this is suggested on their documentation as an alternative. Here’s the resource I used as it’s part of ngCordova http://ngcordova.com/docs/plugins/splashscreen/
The problem I think is that you have installed the plugin using cordova command and this hasn’t registered the plugin with ionic correctly.
I removed the old cordova plugin and installed with
ionic plugin add https://github.com/apache/cordova-plugin-splashscreen.git
But still doesnt work…
Something might be wrong with ng-cordova.js? since the error comes from there.
Can you show me your code where you call $cordovaSplashscreen are you wrapping the call in $ionicPlatform.ready?
$ionicPlatform.ready(function() {
$cordovaSplashscreen.hide();
ionic.Platform.fullScreen();
});
and tried also as it says on the documentation:
$ionicPlatform.ready(function() {
$ImageCacheFactory.Cache(images).then(function() {
$cordovaSplashscreen.hide()
});
});
Above code is where i try to cache my images while the spash is loading.
Can you show me your config.xml file also? Are you only receiving the error on the iOS simulator?
I am getting the error on my browser(firebug).
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.finedine649972" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>FineDine</name>
<description>
An Ionic Framework and Cordova project.
</description>
<author email="hi@ionicframework" href="http://ionicframework.com/">
Ionic Framework Team
</author>
<content src="index.html"/>
<access origin="*"/>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="BackupWebStorage" value="none"/>
<preference name="SplashScreen" value="screen"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="orientation" value="portrait"/>
<platform name="android">
<icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
<icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
<icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
<icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
<icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
<icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
<splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
<splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
<splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
<splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
<splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
<splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
</platform>
<platform name="ios">
<icon src="resources/ios/icon/icon.png" width="57" height="57"/>
<icon src="resources/ios/icon/icon@2x.png" width="114" height="114"/>
<icon src="resources/ios/icon/icon-40.png" width="40" height="40"/>
<icon src="resources/ios/icon/icon-40@2x.png" width="80" height="80"/>
<icon src="resources/ios/icon/icon-50.png" width="50" height="50"/>
<icon src="resources/ios/icon/icon-50@2x.png" width="100" height="100"/>
<icon src="resources/ios/icon/icon-60.png" width="60" height="60"/>
<icon src="resources/ios/icon/icon-60@2x.png" width="120" height="120"/>
<icon src="resources/ios/icon/icon-60@3x.png" width="180" height="180"/>
<icon src="resources/ios/icon/icon-72.png" width="72" height="72"/>
<icon src="resources/ios/icon/icon-72@2x.png" width="144" height="144"/>
<icon src="resources/ios/icon/icon-76.png" width="76" height="76"/>
<icon src="resources/ios/icon/icon-76@2x.png" width="152" height="152"/>
<icon src="resources/ios/icon/icon-small.png" width="29" height="29"/>
<icon src="resources/ios/icon/icon-small@2x.png" width="58" height="58"/>
<icon src="resources/ios/icon/icon-small@3x.png" width="87" height="87"/>
<splash src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" height="1136"/>
<splash src="resources/ios/splash/Default-667h.png" width="750" height="1334"/>
<splash src="resources/ios/splash/Default-736h.png" width="1242" height="2208"/>
<splash src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
<splash src="resources/ios/splash/Default-Portrait~ipad.png" width="768" height="1024"/>
<splash src="resources/ios/splash/Default@2x~iphone.png" width="640" height="960"/>
<splash src="resources/ios/splash/Default~iphone.png" width="320" height="480"/>
</platform>
<icon src="resources/android/icon/drawable-xhdpi-icon.png"/>
</widget>OK, there’s the problem. Splash screen is a cordova plugin so it is ONLY available on the device and not in the browser.
Only develop on your phone
Cordova plugins do not work while developing in your browser, because each plugin accesses a specific API (such as camera, microphone, accelerometer) which is not available in your browser…
http://ngcordova.com/docs/common-issues/
You can define a global to prevent the error in the browser. But you need to use a device or emulator in order to use the plugin.
I’d recommend you develop in Chrome if you have to as Ionic don’t support firefox fully.
Okay, let me try adding ionic.Platform.isAndroid(); control before i run this, i will let you know if it works on my android device.
I don’t get the previous error now but right now splashscreen doesn’t want to wait for the images to load…
I even tried to $cordovaSplashscreen.hide(); inside in if(isAndroid) control, without any caching, it doesnt seem to work.
$ionicPlatform.ready(function() {
var isAndroid = ionic.Platform.isAndroid();
if(isAndroid){
$ImageCacheFactory.Cache(images).then(function() {
$cordovaSplashscreen.hide();
});
}
ionic.Platform.fullScreen();
});When you say it doesn’t work is that on the device?
Yes its on the device. Browser doesn’t give any error from now on, but on my android device it doesn’t recognise the changes i’ve made with splashscreen as hiding or hiding till the content is cached.
Remove all the logic for hiding the splash screen, if you have setup your plugin and config.xml correctly it shouldn’t remove the splash screen. Otherwise, you’ve still not got the plugin setup correctly.
I’ll try to focus more on this issue.
Thank You.
This function will only run on a device, so you don’t need to make an android check. Try creating a new project with ionic start and see why this one works and yours doesn’t. compare the config.xml.
Also try removing platforms and re-adding them. (iOS and android).