Ionic 4 Routing to a view with tabs triggers full page reload

Question

I'm developing an Ionic 4.0.0 App with Angular 7 and I'm trying to combine the side menu with tabs on a secondary page. Let's see how it works:

• Side menu on the left of split-pane and then on the right I have a simple view with a list.
• When clicking an item on the list, it navigates to a page where I have 4 tabs to display some data related to that item.

I'm facing two main issues:

• When dragging back it does nothing. I moved the menu to the right part of the creen just to try that the events are not conflicting.
• When clicking the item on the initial list and routing to the second page with the tabs a full page reload is triggered. That's actually the most annoying part. I'm afraid I'm doing something wrong with angular router.

Basically on the main routing module I check for authentication and show the login page if the user is not authenticated and protect the sub-routes. I'm omitting this code for simplicity.

Then, I have the /app/AppRoutingModule that loads all protected routes and looks like this (omitting some lines):

const routes: Routes = [
    {...},
    {
        path: 'communities',
        loadChildren: './communities/communities-routing.module#CommunitiesRoutingModule',
    },
    {...}
];

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

When reaching the path /app/communities the sub-routing module CommunitiesRoutingModule gets loaded and it looks something like this:

const routes: Routes = [
    {path: '', loadChildren: './communities.module#CommunitiesPageModule'}, // Page with a list of all communities.
    {path: 'view/:id', loadChildren: './view-community/tabs/tabs.module#TabsPageModule'}, //Loads the tabs page module
    {...} //Loads other sub-tabs.
];

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

And finally, the TabsPageModule that gets loaded imports the TabsCommuniitiesRoutingModule

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        TabsCommunitiesRoutingModule
    ],
    declarations: [TabsPage]
})
export class TabsPageModule {
}

And the TabsCommunitiesRoutingModule

const routes: Routes = [
    {
        path: '',
        component: TabsPage,
        children: [
            {
                path: 'info',
                children: [{
                    path: '',
                    loadChildren: '../tab1-info/tab1-info.module#Tab1InfoPageModule'
                }]
            },
            {
                path: 'minutes',
                children: [
                    {
                        path: '',
                        loadChildren: '../tab2-minutes/tab2-minutes.module#Tab2MinutesPageModule'
                    },

                ]
            },
            {
                path: 'apartments',
                children: [{
                    path: '',
                    loadChildren: '../tab3-apartments/tab3-apartments.module#Tab3ApartmentsPageModule'
                }]
            },
            {
                path: 'tasks',
                children: [{
                    path: '',
                    loadChildren: '../tab4-tasks/tab4-tasks.module#Tab4TasksPageModule'
                }]
            }
        ],
    },

];

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

Thanks!

Answer 1

Just managed to solve the issue. I was calling the route using href='/my/tabs/page/', and this triggered the full page reload. From docs I've seen that it should be done using [routerLink]="['/my/tabs/page']".

I'll update all the href to routerLink.