How to set default login page and after login open tabs in ionic-4

Question

I am creating ionic tabs project and I want to set in default login page then after open tabs . I am set in default login page but after login i am not getting tabs in ion

Answer 1

app-routing.module.ts

...

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },<--here
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
];

tabs.router.module.ts

...

const routes: Routes = [
  {
    path: '',<--here
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          { path: '', loadChildren: '../tab1/tab1.module#Tab1PageModule'}
        ]
      },
      ...
      { path: 'tabs', redirectTo: '/tabs/tab1', pathMatch: 'full'}<--here
    ]
  }
];

...

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

Answer 2

This should work.

tabs.router.module.ts

...
const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          { path: '', loadChildren: '../tab1/tab1.module#Tab1PageModule'}
        ]
      },
      ...
      { path: '', redirectTo: '/start/tabs/tab1', pathMatch: 'full'}
    ]
  }
];
...

app-routing.module.ts

...
const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'start', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
];
...

Answer 3

The Answer given by B.Mind is working fine for me. But with few changes.

For Angular 8 and 9, the lazy load declaration changed. Since Angular 8 introduced the new recommended module loading method, previously the default method of lazy loading modules was to specify a string path to a module:

{ path: 'tab1', loadChildren: 'src/app/tabs/tab1.module#Tab2PageModule' }

So Change it to

{ path: 'tab1', loadChildren: () => import('src/app/tabs/tab1.module').then(m => m.Tab2PageModule) }

and navigate like this

this.route.navigateByUrl('/tabs/tab1');