I am facing an issue where the homepage is loading before app.component.ts, causing problems with certain providers not working properly due to import processes not being fully completed.
Despite trying to lazy load the homepage, the console.log still shows that it loads before app.component.ts. Here is my approach in app.module.ts, where I imported the homepage module:
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 {}
In 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(() => {
// Native configurations
statusBar.styleDefault();
splashScreen.hide();
});
// Firebase initialization
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();
}
});
}
}
My tabs.ts file:
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() {
}
}
And here 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')
}
}
The console.log output currently shows:
'homePage loaded'
'Processing app.component.ts'
I need advice on how to ensure that the homepage loads after app.component.ts, as the current sequence causes issues with the functioning of firebase code.