Vassilis Pits Vassilis Pits - 3 months ago 20
TypeScript Question

Use redirectTo if you using also children parameter, is this possible?

As you probably already now in the latest

@angular/router 3.0.0-rc.1
you are not allowed to user
redirectTo
parameter if you also use the
children
parameter.

But for sure in some cases this is something that you need like in my case.
For example what I want is to redirect to first child all requests to the parent router.

Here's my router:

{
path: 'project/:id',
component: ProjectComponent,
children: [
{
path: 'properties',
component: ProjectPropertiesComponent
},
{
path: 'stats',
component: ProjectStatsComponent
}
]
}


I want everyone that goes to the
project/:id
route to get redirected to the first child (
properties
) in my case.

Is this possible somehow?

If I try like this:

{
path: 'project/:id',
component: ProjectComponent,
redirectTo: 'properties',
children: [
{
path: 'properties',
component: ProjectPropertiesComponent,
},
{
path: 'stats',
component: ProjectStatsComponent
}
]
}


I'm getting this error of course:


EXCEPTION: Error: Invalid configuration of route 'project/:id': redirectTo and children cannot be used together

Answer

An empty child route should do the job:

  {
    path: 'project/:id',
    component: ProjectComponent,
    children: [
      {
        path: '',
        redirectTo: 'properties',
      },
      {
        path: 'properties',
        component: ProjectPropertiesComponent,
      },
      {
        path: 'stats',
        component: ProjectStatsComponent
      }
    ]
  }
Comments