Angular route redirectTo with params

Z3R0 picture Z3R0 · Aug 14, 2018 · Viewed 12.7k times · Source

I have a problem with angular routing. In my app i had some routes like this:

[{
     path: 'myroutes/:id',
     component: BarComponent
 }, {
     path: 'myroutes/:id/:value',
     component: FooComponent
 }]

I want to change this routing, but the old routes must be redirected to the new ones. So i changed my code like this:

[{
    path: 'myroutes/:id/:value',
    redirectTo: 'myroute/:id/:value'
}, {
    path: 'myroutes/:id',
    component: BarComponent
}, {
    path: 'myroute/:id/:value',
    component: FooComponent
}]

With this routing im getting a NavigationError:

Cannot redirect to '/myroute/:id/:value'. Cannot find ':id'.

Changing the code to use fixed parameters in the redirectTo route solves the error, but the parameters must be dynamic.

The routes are imported with RouterModule.forRoot().

Hoping this is sufficient information, otherwise feel free to ask for more. ;)

Thanks for your help! :)

Answer

Amit Chigadani picture Amit Chigadani · Aug 14, 2018

Change path for redirectTo. You should prefix it with /

[{
    path: 'myroutes/:id/:value',
    redirectTo: '/myroute/:id/:value'
}, {
    path: 'myroutes/:id',
    component: BarComponent
}, {
    path: 'myroute/:id/:value',
    component: FooComponent
}]