CODEWITHSUNDEEP
angulartypescriptroutesangular2-routing
Vassilis Pits
Vassilis Pits

Reputation: 3848

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

Upvotes: 34

Views: 23033

Answers (3)

uGame
uGame

Reputation: 1

Doesn't work for me in angular 15+. just remove /:id for root route with children

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

Upvotes: 0

j2L4e
j2L4e

Reputation: 7050

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

Upvotes: 103

walter
walter

Reputation: 639

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

Upvotes: 4

Related Questions