typescript - Varför laddas hemsidan innan app.component.ts

Jag vill att startsidan ska laddas när allt är klart, men den laddas innan app.component.ts, vilket jag tror gör att providern inte kan fungera korrekt på grund av att alla importeringar inte är helt bearbetade.

Jag gjorde allt jag vet för att få startsidan att lazy-loada, men console.log visar fortfarande att startsidan laddas innan app.component.ts.

Här är min app.module.ts, där jag importerar homepage-modulen istället för 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 {}

Här är min 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();
      }
    });
  }
}

Här är min 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() {
  }
}

Nedan är min 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')
  }
}

Nedan är vad det visar i min console.log:

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

Vänligen rådgör hur man får homepage att laddas efter app.component.ts, eftersom om den laddas före app.component.ts kommer det göra att Firebase-koden inte fungerar.

Svar #1

Du behöver ta bort initialiseringen som du gjorde under variabeldeklarationen av rootPage i app.component.ts.

rootPage:any = 'TabsPage';

Ändra det till:

rootPage:any;

Eftersom den initialt kommer att ställa in fliksidan som har den första fliken som startsida.