Allabakash
Allabakash

Reputation: 2027

Nested Child Route Module is not working with angular 9

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

Answers (1)

yurzui
yurzui

Reputation: 214305

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

Upvotes: 1

Related Questions