CODEWITHSUNDEEP
angularangular-router
Z3R0
Z3R0

Reputation: 204

Angular route redirectTo with params

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! :)

Upvotes: 12

Views: 38741

Answers (3)

Amit Chigadani
Amit Chigadani

Reputation: 29775

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

Upvotes: 14

Jeffrey Roosendaal
Jeffrey Roosendaal

Reputation: 7157

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

Upvotes: 5

Z3R0
Z3R0

Reputation: 204

I've solved my problem. The issue was that the parameter names in my app were written camelCase. When the parameter are written lower case everything is allright. :)

Thanks for your help!

Upvotes: 2

Related Questions