Angular Router does not resolve required parameters

Question

I am creating an application with Angular and the Angular router. For navigating to one of the sub pages I need a required parameter in my url. How this should be done can be found in the Angular docs. But somehow this method is not working in my project.

Versions:

@angular/core: 7.2.6
@angular/router: 7.2.6

What I am trying to accomplish

I have a product list on one page and detail information on the second page. The routes of the pages are as follows:

Main page: /product-list
Detail page: /product-list/:id/info

The detail page is relative to the main page.

I've tried navigating to the page via:

this.router.navigate(
  [':id/info', item.id], 
  { relativeTo: this.activatedRoute }
)

But this results in an error from the Angular router: Error: Cannot match any routes. URL Segment: ':id/info/03-BR'.

I reproduced this behavior in a stackblitz.

Manually changing the :id

I can navigate to the url if I replace the :id myself, so using ['01-CE/info']as a configuration redirects to the url. So it looks like the router doesn't work as it is described in the docs or am I doing something wrong?

Check this link:https://stackoverflow.com/questions/38062702/how-to-pass-a-parameter-to-routerlink-that-is-somewhere-inside-the-url — Chellappan வ, Feb 22 '19 at 14:02

score 1 · Accepted Answer · answered Feb 22 '19 at 13:53

1

The array is not a replacement, it is a join.

Try

this.router.navigate(
  [item.id, 'info'], 
  { relativeTo: this.activatedRoute }
)

answered Feb 22 '19 at 13:53

MoxxiManagarm

8,735
3
14
43

You are right, append does work. Replacing the param would be better in my opinion... But anyway, Thanks! – Mr.wiseguy Feb 22 '19 at 14:08

score 0 · Answer 2 · answered Feb 22 '19 at 13:58

0

Simply Change [':id/info', item.id], with ['item.id', 'info']

answered Feb 22 '19 at 13:58

Zouhair Ettouhami

228
1
5

Angular Router does not resolve required parameters

2 Answers2