Angular route redirectTo with params

Question

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 1

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
}]

Answer 2

You can create a simple Guard to redirect your old routes if nothing else works.

I think something like this should work:

app-routing.module.ts:

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

forwarder.guard.ts:

@Injectable()
export class forwarderGuard implements CanActivate {

  constructor(
    private router: Router
  ) { }

  canActivate(route: ActivatedRouteSnapshot) {
    this.router.navigate([`myroute/${route.params['id']}/${route.params['value']}`]);
    return false;
  }
}