I am trying to put all my tabs under auth guard and users can see those tabs after they logged in, but I am getting this error
Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘tabs/groups’
Therefore I get blank screen.
code
Login.page.ts
login() {
const user = this.user.value;
this.authService.login(user.phone, user.password).subscribe(
(data: any) => {
this.alertService.presentToast(data.message);
},
error => {
this.alertService.presentToast(error.statusText);
},
() => {
this.router.navigate(['tabs']);
this.menu.enable(true);
}
);
}
app.component.ts
public appPages = [
{
title: 'Dasbor',
url: '/tabs/groups',
icon: 'compass'
}
];
async ngOnInit() {
const path = window.location.pathname.split('tabs/')[1];
if (path !== undefined) {
this.selectedIndex = this.appPages.findIndex(page => page.title.toLowerCase() === path.toLowerCase());
}
}
tabs-routing-module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'groups',
loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
},
{
path: 'phones',
loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
},
{
path: 'tab3',
loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
},
{
path: 'profile',
loadChildren: () => import('../Pages/Auth/profile/profile.module').then( m => m.ProfilePageModule)
},
{
path: '',
redirectTo: '/tabs/groups',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/groups',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
any idea what might cause the error?