Ioni c маршрутизация с использованием вкладок и root страница не работает

Question

Я разрабатываю приложение на Ioni c 4 и застрял в маршрутизации с использованием вкладок. У меня есть страница входа, страница клиентов и страница вкладок с 3 вкладками. Когда пользователь загружает приложение в первый раз, он входит в систему и переходит на страницу клиента при успешном входе в систему. Со следующего раза с условной маршрутизацией я беру его на страницу клиентов. Но странная ситуация возникает после перехода на страницу клиентов. У меня есть функция click на ion-item, которая должна перейти на страницу вкладок, но неожиданно это не навигация. Вот код для того же самого.

Мой файл маршрутизации приложений:

const routes: Routes = [
  // {
  //   path: '',
  //   loadChildren: () => import('./client/client.module').then( m => m.ClientPageModule)
  // },
  {
    path: 'tabs/tab1',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule),
    // canActivate: [IsAuthenticated]
  },
  {
    path: 'tabs/tab2',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule),
    // canActivate: [IsAuthenticated]
  },
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule),
    // canActivate: [IsNotAuthenticated]
  },
  {
    path: 'signup',
    loadChildren: () => import('./signup/signup.module').then( m => m.SignupPageModule),
    // canActivate: [IsAuthenticated]
  },
  {
    path: 'permissions',
    loadChildren: () => import('./permissions/permissions.module').then( m => m.PermissionsPageModule),
    // canActivate: [IsNotAuthenticated]
  },
  {
    path: 'otp-verification',
    loadChildren: () => import('./otp-verification/otp-verification.module').then( m => m.OtpVerificationPageModule),
    // canActivate: [IsNotAuthenticated]
  },
  {
    path: 'modal',
    loadChildren: () => import('./modal/modal.module').then( m => m.ModalPageModule),
    // canActivate: [IsAuthenticated]
  },
  {
    path: 'update-profile-data',
    loadChildren: () => import('./update-profile-data/update-profile-data.module').then( m => m.UpdateProfileDataPageModule),
    // canActivate: [IsAuthenticated]
  },
  {
    path: 'client',
    loadChildren: () => import('./client/client.module').then( m => m.ClientPageModule)
  }

];

app.component.ts

if(userResponse["user_name"]) {
  this.router.navigateByUrl('/client');
} else {
  this.router.navigateByUrl('/login');
}

client.page.ts

 // function called when an existig client is selected from the list
  _clientSelected(clientSelected) {
    let clientData: NavigationExtras = {
      state: {
        client: clientSelected
      }
    };
    this.router.navigate(['tabs/tab1'], clientData);
  }

tabs-routing.module.ts

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab1/tab1.module').then(m => m.Tab1PageModule)
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab2/tab2.module').then(m => m.Tab2PageModule)
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab3/tab3.module').then(m => m.Tab3PageModule)
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

Пожалуйста, помогите мне решить эту ошибку. Заранее спасибо!