Ion-tabs with login page 🤯

Really sorry if this has already been answered somewhere else, none of the other posts I found seemed to solve the problem I’m having… I’m trying to put tabs on a page called ‘dashboard’, where the user authenticates through the ‘home’ page first before they can access it.

The top level routing module look like this:

const routes: Routes = [
    {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
    },
    {
        path: 'home',
        loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
    },
    {
        path: 'dashboard',
        loadChildren: () => import('./dashboard/dashboard.module').then( m => m.DashboardPageModule)
    }
];

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

…and the dashboard routing module looks like this:

const routes: Routes = [
    {
        path: '',
        component: DashboardPage,
        children: [
            {
                path: 'launchpad',
                component: LaunchpadComponent
            },
            {
                path: 'jobs',
                component: JobsComponent
            },
            {
                path: 'invoices',
                component: InvoicesAndQuotesComponent
            },
            {
                path: '',
                redirectTo: '/dashboard/launchpad',
                pathMatch: 'full'
            }
        ]
    },
    {
        path: '',
        redirectTo: '/dashboard/launchpad',
        pathMatch: 'full'
    }
];

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

The launchpad page opens as expected, but if I click on one of the tab buttons (e.g. jobs), I get an error as the router tries to navigate to “/dashboard/launchpad/jobs” instead of “/dashboard/jobs”.

What am I doing wrong?

1 post - 1 participant

Read full topic