Ionic 4 tabs page routing

Ionic Framework
1

Hi All,
I just start testing ionic 4 with tabs starter. But I need as root page Login page (this is fine). After login I need to redirect to tabs page. And there is a problem with routing. Here is example of routes:

app-routing.module.ts

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

];

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

tabs.router.module.ts (no change from default)


const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'about',
        outlet: 'about',
        component: AboutPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:home)',
  }
];

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

login.module.ts


@NgModule({
    imports: [
        IonicModule,
        CommonModule,
        FormsModule,
        RouterModule.forChild([
            {
                path: '',
                component: LoginPage
            }
        ])
    ],
    declarations: [LoginPage]
})

redirect after login

        this.navCtrl.goForward('/tabs');

But I have an error in console:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'tabs'
Error: Cannot match any routes. URL Segment: 'tabs'

I know that it tells me that this route does not exist, but what should I change to make it work?

Thanks a lot

2

From what I understand from ionic-conference-app, you need to have 2 fragments.

app-routing.module.ts

{
    path: 'app', -> **Fragment 1**
    loadChildren: './tabs/tabs.module#TabsPageModule'
}

tabs.router.module.ts (no change from default)

path: 'tabs', --> **Fragment 2**
component: TabsPage,
children: [ ... ]

After login:

this.navCtrl.goForward('/app/tabs');
2 Likes
3

Here you go - Ionic 4 tabs navigation post login - Solution