Angular routes does not render child components from parent-CodePudding

I have an issue with routing in angular. I have a parent which is the shell component and it is loaded from app component. The Shell has the left menu and the dynamic content section on the right side. Once i click on a link in left menu, i need to render the list of of reports as tabs and each report is a child component.

Now, when i try to click on a report , the URL matches with the paths provided in reports.component.ts but it does not render the child component.

I am not sure if I am doing it the correct way. Could anyone please advice me ?

app.routing.module.ts

{
    path: 'app',
    children: [
      { path: 'parent/:param', loadChildren: () => import('./report-list.module').then(m => m.ReportListModule) },
    ]
}

app.component.html

<shell></shell> <!-- Renders shell.component.html -->

shell.component.html

<reports></reports>   <!-- Renders reports.component.html -->
<othermodules></othermodules>

reports.component.html

<router-outlet></router-outlet>

reports.component.ts

 this.router.navigate(['/app/parent/report1'], { queryParams:    params}); 
 this.router.navigate(['/app/parent/report2'], {    queryParams:    params});  
 this.router.navigate(['/app/parent/report3'],    {    queryParams:    params});       
 this.router.navigate(['/app/parent/report4'], {    queryParams:          params});

report-list.module.ts

const routes: Routes = [   
{ path: 'app/parent/report1', component: Report1Component },   
{ path: 'app/parent/report2', component: Report2Component },
{ path: 'app/parent/report3', component: Report3Component },
{ path: 'app/parent/report4', component: Report4Component } ];

@NgModule({   declarations: [],   imports: [
    Report1Module,
     Report2Module,
     Report3Module,
    Report4Module,
     RouterModule.forChild(routes)   ] })

CodePudding user response：

I fixed the issue with the below changes.

this.router.navigate(['/app/parent/reports/report1'], { queryParams:    params}); 

const routes: Routes = [   
{ path: 'app/parent/reports/report1', component: Report1Component },

CodePudding user response：

I think you dont need to define child route with full path.

report-list.module.ts

const routes: Routes = [   
{ path: 'report1', component: Report1Component },   
{ path: 'report2', component: Report2Component },
{ path: 'report3', component: Report3Component },
{ path: 'report4', component: Report4Component } ];

// Code for routing link

 this.router.navigate(['app/parent/report1'], { queryParams:    params}); 
 this.router.navigate(['app/parent/report2'], {    queryParams:    params});  
 this.router.navigate(['app/parent/report3'],    {    queryParams:    params});       
 this.router.navigate(['app/parent/report4'], {    queryParams:          params});