Here is the configuration of my app-routing.module.ts:
const routes: Routes = [
{
path: 'login',
component: LoginComponent
},
{
path: '',
canActivate: [AuthGuard],
component: HomeComponent,
children: [
//todo check login data with AuthGuard
{
path: 'nationalOneWayTicket',
loadChildren: () => import('./national-one-way-ticket/national-one-way-ticket.module').then(m => m.NationalOneWayTicketModule)}
]},
{path: '**', component: PageNotFoundComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes, {enableTracing: false, useHash: true})],
exports: [RouterModule]
})
export class AppRoutingModule { }
In my app.component.ts file, I have defined the following routes :
ngOnInit() {
this.initRoutes();
this.router.navigate([this.urls.login]);
}
private initRoutes(): void {
const routerConfig = [
{path: 'login', component: LoginComponent},
{path: '', canActivate: [AuthGuard], component: HomeComponent, children: [
{path: 'nationalOneWayTicket', loadChildren: () => import('./national-one-way-ticket/national-one-way-ticket.module').then(m => m.NationalOneWayTicketModule)}
]},
{path: '**', component: PageNotFoundComponent}// todo add more paths here
];
this.router.resetConfig(routerConfig);
The structure of my HomeComponent is quite simple as it only includes HTML elements:
<app-header></app-header>
<br>
<br>
<br>
<router-outlet></router-outlet>
After logging in, I try to navigate to the nationalOneWayTicket route using:
this.router.navigate([this.url.nationalOneWayTicket]);
Despite seeing the header, I am unable to view the HTML content of the nationalOneWayTicketModule. I'm unsure what mistake I might be making.