33

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

3 Answers 3

98

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
      }
    ]
  }
6
  • Thx! The same time I was answering exactly the same thing :) but thx anyway this is the correct answer. ;) Sep 2, 2016 at 12:15
  • Glad I could almost help! ;)
    – j2L4e
    Sep 2, 2016 at 12:16
  • I wish I saw this question/answer instead of wasting a lot of time trying to get default redirect working. Thanks @j2L4e
    – Pierre
    Feb 28, 2017 at 16:33
  • 11
    I had to add pathMatch: 'full' after the redirectTo line. Mar 28, 2017 at 11:24
  • doesn't work with pathMatch: "full", you have to use prefix as @user2735883 specified below Feb 6, 2020 at 10:48
3

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.