Estoy creando una aplicación y quiero pasar de la página de inicio de sesión a la página de pestañas. Cuando intento navegar a la página de pestañas, solo se muestra la página de inicio sin pestañas.

aquí está mi código.,

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
      { path: '', redirectTo: 'login', pathMatch: 'full' },
      { path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },

      { path: 'tabs', loadChildren: './pages/tabs/tabs.module#TabsPageModule' }
];

@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
})
export class AppRoutingModule { }

tabs.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';

import { TabsPageRoutingModule } from './tabs.router.module';

import { TabsPage } from './tabs.page';
import { HomePageModule } from '../home/home.module';
import { ActivityPageModule } from '../activity/activity.module';
import { MygroupsPageModule } from '../mygroups/mygroups.module';
import { MessagesPageModule } from '../messages/messages.module';
import { SettingsPageModule } from '../settings/settings.module';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    TabsPageRoutingModule,
    HomePageModule, 
    ActivityPageModule,
    MygroupsPageModule,
    MessagesPageModule,
    SettingsPageModule
  ],
  declarations: [TabsPage]
})
export class TabsPageModule {}

tabs.router.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { TabsPage } from './tabs.page';
import { HomePage } from '../home/home.page';
import { ActivityPage } from '../activity/activity.page';
import { MygroupsPage } from '../mygroups/mygroups.page';
import { MessagesPage } from '../messages/messages.page';
import { SettingsPage } from '../settings/settings.page';



const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: '/tabs/(home:home)',
        pathMatch: 'full',
      },
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'activity',
        outlet: 'activity',
        component: ActivityPage
      },
      {
        path: 'mygroups',
        outlet: 'mygroups',
        component: MygroupsPage
      },
      {
        path: 'messages',
        outlet: 'messages',
        component: MessagesPage
      },
      {
        path: 'settings',
        outlet: 'settings',
        component: SettingsPage
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

Desde la página de inicio de sesión, estoy navegando de esta manera.

this.router.navigate(['tabs']);

pero esto solo muestra una página de inicio sin pestañas. ¿Me puede guiar qué debo hacer? Incluso las pestañas no se muestran en DOM. Intenté inspeccionarlas. Solo muestra la página de inicio como página predeterminada.