Angular Router error redirecting to path with dynamic parameter

0
votes

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!

2
javascriptangularangular-routing

2 Answers

3
votes

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.

0
votes

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'},