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

Question

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

score 97 · Accepted Answer · edited Sep 21 '18 at 08:03

97

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

edited Sep 21 '18 at 08:03

Mr_Green

40,727
45
159
271

answered Sep 02 '16 at 12:05

j2L4e

6,914
34
40

Thx! The same time I was answering exactly the same thing :) but thx anyway this is the correct answer. ;) – Vassilis Pits Sep 02 '16 at 12:15
Glad I could almost help! ;) – j2L4e Sep 02 '16 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 '17 at 16:33
11

I had to add pathMatch: 'full' after the redirectTo line. – Karl Stulik Mar 28 '17 at 11:24
doesn't work with pathMatch: "full", you have to use prefix as @user2735883 specified below – Yohan Dahmani Feb 06 '20 at 10:48
With `pathMatch: 'prefix'` I don't think you'd be able to navigate to 'stats' in the above example. Also `prefix` is the default so you could just remove `pathMatch`. – j2L4e Feb 10 '20 at 08:52

score 3 · Answer 2 · answered Jun 09 '18 at 12:41

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

score 0 · Answer 3 · edited May 02 '23 at 19:00

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

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

3 Answers3