Ion-tabs with login page šŸ¤Æ

Ionic Framework
1

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?

2

Show your tabs implementation

3

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>
4

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.

5

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

6

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.

7

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