Ionic 5 White page loading instead of application page

Hi, recently I upgraded my Ionic application from 3 to 5 and I have been able to resolve all of the errors that have broken in the process. After fixing all the issues I am stuck on a white page even though in my logs it shows that the page is routing to the correct login page. These are the logs generated by the routing module:

Ionic Native: deviceready event fired after 0 ms
vendor.js:79085 Router Event: NavigationStart
vendor.js:79080 NavigationStart(id: 1, url: '/login')
vendor.js:79080 
vendor.js:66254 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
vendor.js:79085 Router Event: RoutesRecognized
vendor.js:79080 RoutesRecognized(id: 1, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } )
vendor.js:79080 
vendor.js:79085 Router Event: GuardsCheckStart
vendor.js:79080 GuardsCheckStart(id: 1, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } )
vendor.js:79080 
vendor.js:79085 Router Event: ChildActivationStart
vendor.js:79080 ChildActivationStart(path: '')
vendor.js:79080 
vendor.js:79085 Router Event: ActivationStart
vendor.js:79080 ActivationStart(path: 'login')
vendor.js:79080 
vendor.js:79085 Router Event: GuardsCheckEnd
vendor.js:79080 GuardsCheckEnd(id: 1, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } , shouldActivate: true)
vendor.js:79080 
vendor.js:79085 Router Event: ResolveStart
vendor.js:79080 ResolveStart(id: 1, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } )
vendor.js:79080 
vendor.js:79085 Router Event: ResolveEnd
vendor.js:79080 ResolveEnd(id: 1, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } )
vendor.js:79080 
vendor.js:79085 Router Event: ActivationEnd
vendor.js:79080 ActivationEnd(path: 'login')
vendor.js:79080 
vendor.js:79085 Router Event: ChildActivationEnd
vendor.js:79080 ChildActivationEnd(path: '')
vendor.js:79080 
vendor.js:79085 Router Event: NavigationEnd
vendor.js:79080 NavigationEnd(id: 1, url: '/login', urlAfterRedirects: '/login')
vendor.js:79080 
vendor.js:79085 Router Event: Scroll
vendor.js:79080 Scroll(anchor: 'null', position: 'null')
vendor.js:79080 

This is the app-routing.module:

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  {
    path: 'login',
    component: LoginPage
  },
  {
    path: 'auth',
    component: AuthPage
  },
  {
    path: 'care-team',
    component: CareTeamPage
  },
  {
    path: 'communities',
    component: CommunitiesPage
  },
  {
    path: 'dashboard',
    component: DashboardPage
  },
  {
    path: 'faq',
    component: FaqPage
  },
  {
    path: 'forgot-password',
    component: ForgotPasswordPage
  },
  {
    path: 'forgot-username',
    component: ForgotUsernamePage
  },
  {
    path: 'friends',
    component: FriendsPage
  },
  {
    path: 'hcs',
    component: HcsPage
  },
  {
    path: 'history',
    component: HistoryPage
  },
  {
    path: 'medicine-detail',
    component: MedicineDetailPage
  },
  {
    path: 'medicines',
    component: MedicinesPage
  },
  {
    path: 'notifications',
    component: NotificationsPage
  },
  {
    path: 'privacy',
    component: PrivacyPage
  },
  {
    path: 'profile',
    component: ProfilePage
  },
  {
    path: 'settings',
    component: SettingsPage
  },
  {
    path: 'signup',
    component: SignupPage
  },
  {
    path: 'terms',
    component: TermsPage
  },
  {
    path: 'wearables',
    component: WearablesPage
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, enableTracing: true, useHash: true }),
  ],
  providers: [{ provide: APP_BASE_HREF, useValue: '/' }, ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

This is the app.module:

@NgModule({
    declarations: [MyAppPage,
        AuthPage,
        CareTeamPage,
        CommunitiesPage,
        DashboardPage,
        FaqPage,
        ForgotPasswordPage,
        ForgotUsernamePage,
        FriendsPage,
        HcsPage,
        HistoryPage,
        LoginPage,
        MedicineDetailPage,
        MedicinesPage,
        NotificationsPage,
        PrivacyPage,
        ProfilePage,
        SettingsPage,
        SignupPage,
        TermsPage,
        WearablesPage
    ],
    entryComponents: [MyAppPage],
    imports: [BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        IonicSignaturePadModule,
        NgbModalModule,
        IonicModule.forRoot(),
        NgbModule],
    providers: [
        StatusBar,
        SplashScreen,
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
        ApiService,
        Device,
        Camera,
        InAppBrowser,
        FingerprintAIO,
        LocalNotifications,
        Contacts,
        BackgroundMode,
        Keyboard,
        Firebase,
        Badge,
        HttpClient,
        IonicsignaturepadProvider,
    ],
    bootstrap: [MyAppPage],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]

})
export class AppModule {}

This issue because of Firebase plugin…

You need to adopt lazy loading.
Loading all components at startup spells doom for would be users since your app will be mega slow.