Below is my setup for nested routes:
home --
about --
test
Clicking on host/about works fine. However, navigating to host/about/test is causing a redirect to "/" instead of displaying the desired content.
You can find the code snippet below and a live demo on stackblitz. Any help in resolving this issue would be greatly appreciated.
app.module.ts
const appRoutes: any = [
{ path: 'about', pathMatch: 'full', loadChildren: './about/about.module#AboutModule' },
];
@NgModule({
imports: [ BrowserModule, FormsModule, RouterModule.forRoot(
appRoutes ) ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
app.component.html
<a href="/about">Go to /about</a><br>
<a href="about/test">Go to /about/test</a>
<router-outlet></router-outlet>
about.module.ts
const appRoutes: Routes = [
{ path: '', pathMatch: 'full', component: AboutComponent },
{ path: 'test', pathMatch: 'full', loadChildren: './test/test.module#TestModule' },
];
@NgModule({
declarations: [
AboutComponent
],
imports: [
CommonModule,
RouterModule.forChild(appRoutes)
],
providers: []
})
------------
test.module.ts
const appRoutes: Routes = [
{ path: '', pathMatch: 'full', component: TestComponent }
];
@NgModule({
declarations: [
TestComponent
],
imports: [
CommonModule,
RouterModule.forChild(appRoutes)
],
providers: []
})