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

16,222

Solution 1

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

Solution 2

j2L4e answer is correct, but I was also forced to set the 'pathMatch' type as 'prefix' ..

pathMatch: 'prefix'

  {
    path: 'project/:id',
    component: ProjectComponent,
    children: [
      {
        path: '',
        redirectTo: 'properties',
        pathMatch: 'prefix'
      },
      {
        path: 'properties',
        component: ProjectPropertiesComponent,
      },
      {
        path: 'stats',
        component: ProjectStatsComponent
      }
    ]
  }
Share:
16,222
Vassilis Pits
Author by

Vassilis Pits

Web enthousiast since the web init ;) Web developer since 2000.

Updated on June 24, 2022

Comments

  • Vassilis Pits
    Vassilis Pits almost 2 years

    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