Reputation: 2027
I have defined nested route like below.
home --
about --
test
when click on link host/about, its working. But when i navigate to host/about/test, its not working , just redirecting to "/".
Please find the code below and demo at stackblitz. and help me with the issue.
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: []
})
Upvotes: 0
Views: 65
Reputation: 214305
I went through your demo in stackblitz and found out two issues:
app.module.ts
{ path: 'about', pathMatch: 'full', loadChildren: './about/about.module#AboutModule'
^^^^^^^^^^^^^^^^^
remove this
test.module.ts
export class TesttModule {
^^
doubled 't'
Upvotes: 1