CODEWITHSUNDEEP
typescriptionic-frameworkionic2ionic3
Jerry
Jerry

Reputation: 1583

Why homepage loaded before app.component.ts

I want the homepage to be loaded when everything is ready, but it loads before app.component.ts, which I think it caused provider can't work properly because of all the import things not fully processed.

I did everything that I know to make the homepage lazy load, but console.log still show the homepage loaded before app.component.ts.

Here is my app.module.ts, which I import homepage module instead of homepage:

import { HomePageModule } from '../pages/home/home.module';
@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    TabsPageModule,
    HomePageModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
})
export class AppModule {}

Here is my app.component.ts:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { firebaseConfig } from './credential'
import firebase from 'firebase';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = 'TabsPage';

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    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();
    });

    firebase.initializeApp(firebaseConfig);

    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
      console.log('Processing app.component.ts')
      if (!user) {
        this.rootPage = 'LoginPage';
        unsubscribe();
      } else {
        this.rootPage = 'TabsPage';
        unsubscribe();
      }
    });
  }
}

Here is my tabs.ts:

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
@IonicPage()
@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = 'HomePage';
  tab2Root = AboutPage;
  tab3Root = ContactPage;
  constructor() {
  }
}

Below is my home.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, ) {
  }
  ionViewDidLoad() {
    console.log('homePage loaded')
  }
}

Below is what it show in my console.log:

'homePage loaded'
'Processing app.component.ts'

Please advise how to make the homepage load after app.component.ts, because if it loads before app.component.ts, then it will cause the firebase code doesn't work.

Upvotes: 3

Views: 1843

Answers (1)

Suraj Rao
Suraj Rao

Reputation: 29624

You need to remove the initialization you did during the variable declaration of rootPage in app.component.ts. 

rootPage:any = 'TabsPage';

Change it to:

rootPage:any;

As it will initially set the TabsPage which has the first tab as HomePage.

Upvotes: 2

Related Questions