Ionic routing involving tabs and root page doesn't work

Question

I am developing an application in Ionic 4 and stuck in the routing involving tabs. I have a login page, clients page and a tab page with 3 tabs. When the user loads the app for the first time he logs in and moves to client page on successful login. From the next time onwards with conditional routing I take him to clients page. But the wierd situation arises after coming to clients page. I have a click function on ion-item which should navigate him to tabs page, but unexpectedly it is not navigating. Here is the code for the same.

My app-routing file:

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'
  }
];

Please help me solving this error. Thanks in advance!

Answer 1

make sure you use ion-router-outlet not router-outlet in client page or at root
this may solve the issue