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?

Show your tabs implementation

This is my tab page:

<ion-content>
    <ion-tabs *ngIf="teams.selectedTeam$ | async">
        <ion-tab-bar slot="bottom">

            <ion-tab-button tab="launchpad">
                <ion-icon name="home-outline"></ion-icon>
            </ion-tab-button>

            <ion-tab-button tab="jobs">
                <ion-icon name="hammer-outline"></ion-icon>
            </ion-tab-button>

            <ion-tab-button tab="invoices">
                <ion-icon name="document-text-outline"></ion-icon>
            </ion-tab-button>

        </ion-tab-bar>
    </ion-tabs>
</ion-content> 

I think I’ve made some progress after reading through a few more guides… If I understand things correctly, the ‘/dashboard’ part of the route gets resolved before the DashboardPageModule is loaded, so a few things should change:

  1. the top-level empty route in DashboardPageRoutingModule should not redirect anywhere.
  2. the child-redirect inside the dashboard route should redirect to ‘/tab-name’ and not ‘/Dashboard/tab-name’.

This seems to fix my problem, but goes against most of the tutorials I’ve read!

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

The problem still isn’t completely solved… This seems to work most of the time, but every so often when I try to call this.router.navigate([‘dashboard’]); I get a “/jobs” route does not exist error.

According to the Ion Tabs Docs

When used with Angular’s router the tab property of the ion-tab-button should be a reference to the route path.

In other words you should lazy load the components you’re using as tabs:

const routes: Routes = [
   {
      path: '',
        component: DashboardPage,
        children: [
            {
                path: 'launchpad',
                loadChildren: () => import('./launchpad/page/path.module').then(m => m.LaunchpadPageModule)
            },
            {
                path: 'jobs',
                loadChildren: () => import('./jobs/page/path.module').then(m => m.JobsPageModule)
            },
            {
                path: 'invoices',
                loadChildren: () => import('./invoices/page/path.module').then(m => m.InvoicesPageModule)
            },
            {
                path: '',
                redirectTo: '/dashboard/launchpad',
                pathMatch: 'full'
            }
        ]
    },
    {
        path: '',
        redirectTo: '/dashboard/launchpad',
        pathMatch: 'full'
    }
];

Also note that you MUST have a routing and a module file for each tab

Thanks for the info. This doesn’t seem to fix my problem though unfortunately. The tabs are now all defined as pages and I still get routing issues.

FWIW - routing to individual tabs seems to work fine (for both components and pages) using router.navigate([‘dashboard’, ‘tab-name’]), but when I add the redirects, I start getting strange routes.

Well, when I had this kind of problem I started a new project using the tabs template and copy paste the code in my project. Kind of lazy and/or dumb but hey, it worked haha