After numerous attempts, I finally managed to configure the adviceRouterModule correctly.
Despite extensive research and Google searches, I couldn't quite crack it.
Here is the configuration for my AdviceRoutingModule:
const adviceRouters: Routes = [
{
path: 'advies',
canActivate: [AuthGuard],
children: [
{path: '', redirectTo: 'huidig', pathMatch: 'full', canActivate: [AuthGuard] },
{path: 'huidig', component: AdviceComponent, canActivate: [AuthGuard] },
{path: 'archief', component: AdviceArchiveComponent, canActivate: [AuthGuard] },
]
}
];
The navigation template for advice looks like this:
<nav class="nav-tab-bar">
<a routerLink="/advies/huidig" routerLinkActive="active" class="nav-tab-bar-tab">Adviezen</a>
<a routerLink="/advies/archief" routerLinkActive="active" class="nav-tab-bar-tab">Eerdere Adviezen</a>
</nav>
<router-outlet></router-outlet>
When a user clicks on "Adviezen," they should be directed to:
http://localhost:4200/advies/huidig
However, at first, nothing happened. It turns out the issue was with the routing configuration:
const adviceRouters: Routes = [
{
path: 'advies',
component: AdviceNavigationComponent,
canActivate: [AuthGuard],
children: [
{path: '', redirectTo: 'huidig', pathMatch: 'full', canActivate: [AuthGuard] },
{path: 'huidig', component: AdviceComponent, canActivate: [AuthGuard] },
{path: 'archief', component: AdviceArchiveComponent, canActivate: [AuthGuard] },
]
}
];
In the advice.module file, the correct setup should be as follows:
@NgModule({
imports: [
AdviceRoutingModule,
CommonModule,
ReactiveFormsModule,
SharedModule
],