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

angularangular2-routingroutingtypescript

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

Best Answer

An empty child route should do the job:

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