Animated splash screen SplashPage shows Homepage first

During running the splash screen it will open the home page for some millisecond and then loading the splash screen .How can i avoid that initial loading

My app.component.ts file

export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, modalCtrl: ModalController) {

    platform.ready().then(() => {


      let splash = modalCtrl.create(SplashPage);



export class SplashPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController,public splashScreen: SplashScreen) {

  ionViewDidEnter() {


    setTimeout(() => {
    }, 4000);


1 Like

The problem is you are using a modal as a splash screen, and you’re waiting until platform ready to present it. Why not use the splashscreen plugin that comes with ionic?

Isn’t the modal additionally to the normal splash?

Why do you need that @sabarinathen?
What is that timeout for?

Add log outputs to both functions (and inside the platform.ready) to see what is fired when. I think because pf the platform.ready this is later than expected.

making animation splash screen. After animation will finish i will move on to the home page. How could i implement that @Sujan12 @beck24

I would probably start the app in this SplashPage and later replace the rootpage so it completely goes to a different Page. Not load the final page and then overlay the SplashPage. (untested)

I have the same problem, is there a way to avoid this behaviour?