Angular child route with ID not doing anything

Question

First off my apology for the 'noobish' question, but I have digged through all solutions yet I can't figure it out.

My childroute isn't working. When I click the link it doesn't throw an error nor redirects so I don't know how to debug this.

This is in my app-routing.module.ts:

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: 'tools', component: ToolsComponent, outlet: 'forum' },
      {
        path: 'tutorials',
        component: TutorialsComponent,
        outlet: 'forum',
        children: [{ path: 'tutorials/:id', component: UsecasesComponent, outlet: 'forum' }]
      },

      { path: 'scripts', component: ScriptsComponent, outlet: 'forum' }
    ]
  },
  { path: 'about', component: UsecasesComponent },
  { path: '**', redirectTo: '/' }
]

This is the problematic code:

children: [{ path: 'tutorials/:id', component: UsecasesComponent, outlet: 'forum' }]

In my topic-card.component.html I generate a link like so:

<a mat-list-item [routerLink]="[{ outlets: { forum: ['tutorials', '1'] } }]">TESTLINK</a>

An image of the webpage:

This is the link that gets generated: http://localhost:4200/dashboard/(forum:tutorials/(forum:tutorials/1))

So, when I click the link nothing happens. Does anybody have a clue as to what might be going wrong here?

Check out: https://stackoverflow.com/questions/45669030/how-to-trace-routing-in-angular-2 — Daniel, Nov 19 '19 at 14:58
This will make console.log () of each route change and you will see what is happening — Daniel, Nov 19 '19 at 14:59
@Daniel Hey, thanks for the quick reply. I have added enableTracing but there's no output in the console unfortunately. — Mihael Keehl, Nov 19 '19 at 15:04

AmYne Gaïeb · Accepted Answer · 2019-11-24T11:55:14.113

1

When you are using children routes you don't have to repeat some part of the path in the children path

Also this is not the proper way to use the outlet, instead you will let the default < router-outlet > (make sure you remove the name attribute in the directive) handle the navigation in your app :

const routes: Routes = [
 { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
 {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: 'tools', component: ToolsComponent },
      { path: 'tutorials', component: TutorialsComponent},
      { path: 'tutorials/:id', component: TutorialsPostComponent},
      { path: 'scripts', component: ScriptsComponent}
     ]},
 { path: 'about', component: UsecasesComponent },
 { path: '**', redirectTo: '/' }
]

You can navigate with routerLink this way using absolute path:

<a mat-list-item [routerLink]="['/dashboard/tutorials', 1]">TESTLINK</a>

Check angular documentation about child routes here.

A good tutorial to understand how routes are working within angular.

edited Nov 24 '19 at 11:55

answered Nov 19 '19 at 15:24

AmYne Gaïeb

130
3
13

I am so confused. I added your link, and the generated link is the exact same as mine and has the same result as well. When I remove the tutorials part from the childroute, I get a redirect to a blank page. Could it be that the outlet doesn't work properly? Because the link resides within the 'forum' outlet, and that outlet is used already for the 'TutorialsComponent' (see image). – Mihael Keehl Nov 19 '19 at 15:38
yes, i edited the syntax for the routerLink try it now – AmYne Gaïeb Nov 19 '19 at 15:41
Thanks for trying, I get an error now: ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dashboard/tutorials/1' The link is: http://localhost:4200/dashboard/(forum:tutorials)(forum:dashboard/tutorials/1) I have updated the routes like you said. – Mihael Keehl Nov 19 '19 at 15:44
i edited the answer , don't hesitate to have a look always at the official Angular documentation (i provided you a link) – AmYne Gaïeb Nov 19 '19 at 16:05
I finally figured it out. I removed the 'name' from the router outlet, then instead of adding a child with :id to the tutorialsComponent I added another path like: { path: 'tutorials/:id', component: TutorialspostComponent } as a child of the DashboardComponent. So your solution almost worked, I still have no idea why it didn't. If you could edit your answer I can accept it because it was very close! – Mihael Keehl Nov 22 '19 at 18:29
1

Of course if you will let the default handle the app navigation you will have to remove the name attribute from that directive, i didn't mentionned it but i will ! For the modification of the path, Both works: you can access to a child of another child (little bit complex) or you can simply work with one parent and one child as you choosed in your last comment, i will edit my answer ! Hope i was helpful :) – AmYne Gaïeb Nov 24 '19 at 11:05

Sandeep Kumar · Answer 2 · 2019-11-19T15:27:32.867

0

Try:

<a mat-list-item [routerLink]="[{ outlets: { forum: ['tutorials', '{id: 1}'] } }]">TESTLINK</a>

or you can simply pass the value:

<a mat-list-item [routerLink]="[{ outlets: { forum: ['tutorials', 1] } }]">TESTLINK</a>

edited Nov 19 '19 at 15:27

answered Nov 19 '19 at 15:10

Sandeep Kumar

2,397
5
30
37

Thanks for the suggestion. Unfortunately it's the same result. No error, no redirect, nothing happens. – Mihael Keehl Nov 19 '19 at 15:21
i forgot to close the braces : }, updated the answer. – Sandeep Kumar Nov 19 '19 at 15:28
I noticed that as well, but the result of both links are exactly the same: http://localhost:4200/dashboard/(forum:tutorials/(forum:tutorials/1)) The first one: http://localhost:4200/dashboard/(forum:tutorials/(forum:tutorials/%7Bid:%201%7D)) Both still don't do anything. It might be a problem with my outlet? The component that is loaded right now is the tutorialsComponent, and within that resides the link but both use the same outlet. Should I use a different one maybe? – Mihael Keehl Nov 19 '19 at 15:39
are those linked generated by the app or you are typing them manually? – Sandeep Kumar Nov 19 '19 at 17:51
Those are the generated links from the routerlink, not manual. – Mihael Keehl Nov 19 '19 at 17:52

Angular child route with ID not doing anything

2 Answers2