-1

My app.routing.module is as follows

{ path: 'dashboard', component: DashboardComponent },
{ path: 'reports', loadChildren: () => import('./reports/reports.module').then(m => m.ReportsModule)

AND the routes for lazy-loaded module is as follow

  path: '', component: ReportsComponent, 
  children: [
  { path : 'reports/:d_name' ,component: ReportdetailComponent },

Now how can i navigate to the paramaterized child route of the lazy-loaded module?

Muhammad Mehdi
  • 531
  • 1
  • 5
  • 14

1 Answers1

2

The current route you wrote is reports/reports/:d_name

you should write your route that way in your child router

 path: '', component: ReportsComponent, 
  children: [
  { path : ':d_name' ,component: ReportdetailComponent },

edit :

{path: '', component: ReportsComponent, 
children: [{ path : ':d_name' ,component: ReportdetailComponent }] }]

when you add a children property to a current path, it means that it is the role of the parent component to handle the routing using a <router-outlet></router-outlet> In this case the ReportsComponent need a router-outlet. It is usefull if you want a top component for each children and only modify a part of the page using the children.

 {  path: '', component: ReportsComponent}, 
 { path : ':d_name' ,component: ReportdetailComponent }

If you want only the main router of your app, you should avoid using children property.

It depends on your needs, if you provide more details, I could better understand the context.

Jeiraon
  • 187
  • 1
  • 8
  • I have just removed the auxilary now when i navigate the pagenotfound component gets displayed!.I want the navigated child component displayed in the first – Muhammad Mehdi Jul 13 '20 at 12:28
  • may u please reply my above commented question? – Muhammad Mehdi Jul 14 '20 at 10:29
  • @marioPetrovic may u please reply my above commented question? – Muhammad Mehdi Jul 14 '20 at 11:06
  • I am not sure what are you asking. Can you add some code to your question for that pleae? – Mario Petrovic Jul 14 '20 at 11:31
  • @MarioPetrovic I want the router to display the child components of the lazy-loaded in the only one in which the module lazy-loaded,where module lazy-loads and it's children routes also gets rendered, when clicked.I mean to say that I only want to have one .but I'am getting error – Muhammad Mehdi Jul 14 '20 at 12:11
  • Well if you have one `` you should be able to render any routed content. Did you import RouterModule in component where you use ``? – Mario Petrovic Jul 14 '20 at 12:24
  • Yes sir I have imported – Muhammad Mehdi Jul 14 '20 at 12:40
  • Can you provide error message please or just ask another question and link it here so we have a clear example – Mario Petrovic Jul 14 '20 at 15:04
  • app.routing.module.ts as ` { path: 'reports', loadChildren: () => import('./reports/reports.module').then(m => m.ReportsModule) },{ path: '' , redirectTo : 'dashboard', pathMatch: "full"}, { path: '**' ,component: PagenotfoundComponent }`and app.component as `
    Reports
    ` and report.routing.module as `{ path: '', component: ReportsComponent, children: [{ path : ':d_name' ,component: ReportdetailComponent }] }];`.     – Muhammad Mehdi Jul 15 '20 at 04:28
  • reports.html has another component inside it which is shared module's component as ` ` the datacard.html it call function as `
    ` which takes arguments and its datacard.component.ts it navigates `navigate(depart){ this.router.navigate([depart], {relativeTo: this.route}) }` now when i navigate ,the `ReportdetailComponent` doesn't displays,but when i change the route configuration of the     – Muhammad Mehdi Jul 15 '20 at 04:35
  • `{path: '', component: ReportsComponent, children: [{ path : ':d_name' ,component: ReportdetailComponent }] }];` to `{ path: '', component: ReportsComponent}, { path : ':d_name' ,component: ReportdetailComponent }` it works why?.and Again with `{path: '', component: ReportsComponent, children: [{ path : ':d_name' ,component: ReportdetailComponent }]`when i add `` inside the `report.component.html` it works and displays.why? – Muhammad Mehdi Jul 15 '20 at 04:35
  • @MarioPetrovic here is new question https://stackoverflow.com/questions/62947496/can-anyone-tell-me-the-flow-of-router-that-how-it-treats-the-route-configuration – Muhammad Mehdi Jul 17 '20 at 05:16
  • 1
    @mario i have questioned now..newly – Muhammad Mehdi Jul 17 '20 at 05:16