ionic2 splashscreen not visible

Question

I've been trying to add a custom splash screen to my ionic2 sidemenu project.But while I run the command "ionic serve -l" on the command prompt,I see the homepage of my app in the local host instead of a splash screen. Procedure I followed was similar to the one described here:https://www.youtube.com/watch?v=x04rztL2eIs

1. Firstly I deleted the default ionic icon and the splash.png image in the resources folder along with the splash folder inside the android and ios folders.
2. Then i've added the .png image of my choice with specified dimensions to the resources folder.
3. Then I've run the command "ionic resources android --splash" and "ionic resources ios --splash" which automatically created the splash folder inside ios and android folders respectively with the image.
4. I've set the function "Splashscreen.show();" in app.component.ts I even set the default value to 3000 in the config.xml file.

Upon doing all this, I ran the command "ionic serve -l" in my command prompt.But it still shows the home page of my sidemenu app rather than the splash screen.

app.component.ts file
    import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';


@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = Page1;

  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Page One', component: Page1 },
      { title: 'Page Two', component: Page2 }
    ];

  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.show();
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

config.xml file

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>V2 Test</name>
  <description>An awesome Ionic/Cordova app.</description>
  <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
  <content src="index.html"/>
  <access origin="*"/>
  <allow-navigation href="http://ionic.local/*"/>
  <allow-intent href="http://*/*"/>
  <allow-intent href="https://*/*"/>
  <allow-intent href="tel:*"/>
  <allow-intent href="sms:*"/>
  <allow-intent href="mailto:*"/>
  <allow-intent href="geo:*"/>
  <platform name="android">
    <allow-intent href="market:*"/>
    <splash src="resources\android\splash\drawable-land-ldpi-screen.png" density="land-ldpi"/>
    <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"/>
  </platform>
  <platform name="ios">
    <allow-intent href="itms:*"/>
    <allow-intent href="itms-apps:*"/>
    <splash src="resources\ios\splash\Default~iphone.png" width="320" height="480"/>
  </platform>
  <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="SplashMaintainAspectRatio" value="true"/>
  <preference name="FadeSplashScreenDuration" value="3000"/>
  <preference name="SplashShowOnlyFirstTime" value="false"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="SplashScreenDelay" value="3000"/>
  <feature name="StatusBar">
    <param name="ios-package" onload="true" value="CDVStatusBar"/>
  </feature>
  <plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
  <plugin name="cordova-plugin-whitelist" spec="1.3.1"/>
  <plugin name="cordova-plugin-console" spec="1.0.5"/>
  <plugin name="cordova-plugin-statusbar" spec="2.2.1"/>
  <plugin name="cordova-plugin-device" spec="1.1.4"/>
  <plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/>
</widget>

I've read on the internet that we require an android emulator and ios emulator for viewing the splash screen.Is it really required ?

Please help me on how to display the custom splashscreen.

Answer 1

I've read on the internet that we require an android emulator and ios emulator for viewing the splash screen.Is it really required ?

Yes. You need to run in an emulator or an actual device for the splashscreen.

Because it is actually a cordova plugin imported via Ionic Native. Link here. Cordova plugins in general are disabled in ionic serve as they are specifically for using features of a mobile device. You seem to have followed all the steps. Run in an emulator and check.

According to this link in Github, the splashscreen is automatically shown if the settings are placed in your config.xml. You have to call Splashscreen.hide().

 initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }