Passing parameters to route not found - Angular 12

Question

Defining the Route in my app-routing :

{ path: 'user/:id', component: UserDetailComponent },

Defining the Navigation

<a [routerLink]="['/user', user.id]">detail</a>

In UserDetailComponent

this.id = +this.route.snapshot.params['id'];

Firstly. I get user detail, but when I refresh page (userdetail/:id) I get this message error

You angular app is not loading xD – Antoniossss Jun 13 '22 at 08:14 — Antoniossss, Jun 13 '22 at 08:14

score 0 · Answer 1 · answered Jun 13 '22 at 08:08

0

I think that in the UserDetailComponent you need in the beginning of the NgOnInit you need to define this:

 const urlInfo = this.route.snapshot.paramMap.get('id');
 this.getDetails(urlInfo) //in this function you subscribe to the api call

answered Jun 13 '22 at 08:08

devZ

606
1
7
23

I tried it. Same problem – Ayoub Haddi Jun 13 '22 at 09:08
1

Can you make for us stackblitz example? – devZ Jun 13 '22 at 11:07

score 0 · Answer 2 · answered Jun 13 '22 at 08:13

0

I believe you missed the slash position... In your routing code, you have a slash separating users from the id, just change the code from this:

<a [routerLink]="['/user', user.id]">detail</a>

To this:

<a [routerLink]="['user/', user.id]">detail</a>

answered Jun 13 '22 at 08:13

manjiro sano

784
3
15

score 0 · Answer 3 · answered Jun 13 '22 at 08:14

0

Looks like you are having base="/user" in your index.html or something else while you need it to be base="/" (assuming you are doing plain npm ng serve)

answered Jun 13 '22 at 08:14

Antoniossss

31,590
6
57
99

Passing parameters to route not found - Angular 12

3 Answers3