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

Question

我定义了如下嵌套路由。

home --
       about --
                test

当点击 link host/about 时，它的工作。但是当我导航到 host/about/test 时，它不起作用，只是重定向到“/”。

请在 stackblitz 找到下面的代码并进行演示。并帮助我解决问题。

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

我在 stackblitz 中查看了您的演示，发现了两个问题：

你不应该使用 pathMatch: 'full' 用于具有 loadChildren 配置的路径。

app.module.ts

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

注意拼写

test.module.ts

export class TesttModule {
                ^^
              doubled 't'

Forked Stackblitz

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

Nested Child Route Module is not working with angular 9

typescript

angular-ui-router

angular