I am facing an issue with my Ionic 4 (4.10.2 with Angular 7.3.1) app where I want to make it accessible only after login. Following a tutorial from , I encountered a problem when trying to access the ion-tabs section of my app. Chrome keeps showing this error in the console log: "Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'members/tab1'."
The app is supposed to interact with a Laravel backend, and I plan to use tokens for securing the connection. However, at this point, I am only using a mock token provided in the tutorial. When attempting to navigate to anything other than the tabs section post-login, it works fine. But that doesn't resolve the core issue.
Here is the routing setup in app-routing.module.ts:
const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', loadChildren: './public/login/login.module#LoginPageModule' },
{ path: 'register', loadChildren: './public/register/register.module#RegisterPageModule' },
{
path: 'members',
canActivate: [AuthGuard],
loadChildren: './members/member-routing.module#MemberRoutingModule'
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
Considering member-routing.module.ts:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: 'message', loadChildren: './message/message.module#MessagePageModule' },
// Additional route configurations...
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MemberRoutingModule { }
Snippet from app.component.ts initializing the app:
initializeApp() {
this.platform.ready().then(() => {
// Code block for initialization...
});
}
Tackling routing in tabs.router.module.ts:
const routes: Routes = [
// Route configurations...
];
Example of a mock-login button in login.page.html:
<ion-button (click)="login()" expand="block" routerLink="../members/tab1">Login</ion-button>
My goal is to ensure that upon clicking the login button, the mock login remembers the user's state as logged in so they can access tab navigation and pages seamlessly.
If additional modifications such as implementing auth.guard.ts are necessary, please advise. Thank you in advance!