嵌套子路由模块不适用于 angular 9

Question

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: []
})

Answer 1

I went through your demo in stackblitz and found out two issues:

• you shouldn't use pathMatch: 'full' for paths with loadChildren configuration.

app.module.ts

{ path: 'about', pathMatch: 'full',  loadChildren: './about/about.module#AboutModule' 
                 ^^^^^^^^^^^^^^^^^
                   remove this

• pay attention on spelling

test.module.ts

export class TesttModule {
                ^^
              doubled 't'

Forked Stackblitz