Angular Router error redirecting to path with dynamic parameter

Question

I want to redirect user to a path with a unique UUID when they hit root (localhost:4200).

But I get this error

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'document/4fdb309b-df59-4da8-a32d-5265f7925bba'

Error: Cannot match any routes. URL Segment: 'document/4fdb309b-df59-4da8-a32d-5265f7925bba'

Below is my router module code segment

import { v4 as uuidv4} from 'uuid'

const routes : Routes = [
  {path : '', redirectTo : '/document/'+uuidv4(), pathMatch: 'full'},
  {path : 'documents/:id', component: DocumentComponent}
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

Not sure whats wrong!

Barremian · Accepted Answer · 2021-05-14 11:40:35Z

3

Most probably it's due to route ordering. Try to rearrange the routes

const routes : Routes = [
  {path : 'documents/:id', component: DocumentComponent},
  {path : '', redirectTo : '/document/'+uuidv4(), pathMatch: 'full'}
]

Note that Angular Router uses first-match wins strategy and the ordering of the routes in the array does matter.

edited May 14, 2021 at 11:40

answered May 14, 2021 at 11:32

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steve Lennon Over a year ago

Yep, That was it, working fine now. Thanks

Kshitij · Accepted Answer · 2021-05-14 11:31:27Z

0

You can not declare dynamic route path. uuid4() will generate different uuid every time and you don't have those many components mapped to routes. you may want uuid as a route parameter as well. change first route to following and see if it helps.

{path : '', redirectTo : '/document/someComponent', pathMatch: 'full'},

edited May 14, 2021 at 11:31

answered May 14, 2021 at 11:16

Kshitij

6556 silver badges9 bronze badges

2 Comments

Steve Lennon Over a year ago

That didn't help, got same error. I want to generate new ID and redirect user to same component everytime. Is there any alternate approach.

Kshitij Over a year ago

If you are redirecting to same component then why not give static path? Check my edit.

Collectives™ on Stack Overflow

Angular Router error redirecting to path with dynamic parameter

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related