Route without parameter value; Angular route redirect - Can I use redirectTo to parameter path?

Question

I'm wandering if it is possible to redirect path: ' ' to path: ':id' ? Is there a way I can achieve this?

Thank you.

{
  path: 'folder',
  children: [
    {
      path: '',
      redirectTo: ':id',
      pathMatch: 'full',
    },
    {
      path: ':id',
      canActivate: [AuthGuard],
      component: DocumentsComponent,
    },
  ]
}

You can do this with a path matcher function instead of specifying a static path: See https://angular.io/guide/routing-with-urlmatcher and https://stackoverflow.com/a/56391974/1751497 — rooby, Oct 12 '21 at 01:29

Свободен Роб · Accepted Answer · 2017-04-02T13:02:56.853

7

I found a way to redirect 'folder' route to 'folder/:id' with empty 'id' parameter:

{
    path: 'folder',
    redirectTo: 'folder/',
    pathMatch: 'full',
},
{
    path: 'folder',
    children: [
        {
            path: ':id',
            canActivate: [AuthGuard],
            component: DocumentsComponent,
        },
    ]
}

*Note that the redirect must be first.

edited Apr 02 '17 at 13:02

answered Apr 02 '17 at 12:57

Свободен Роб

2,579
2
20
26

score 3 · Answer 2 · answered Jan 27 '17 at 17:05

if you give a default id lets say 1 and redirectTo '1' like below it should work,

{
  path: 'folder',
  children: [
    {
      path: '',
      redirectTo: '1',
      pathMatch: 'full',
    },
    {
      path: ':id',
      canActivate: [AuthGuard],
      component: DocumentsComponent,
    },
  ]
}

Hope this helps!!

score 1 · Answer 3 · answered Jan 27 '17 at 17:03

I don't think you can.

The redirectTo property must be a string, and you would need to pass a link parameters array with a value for the :id param.

It's a bit hackish, but you could redirect the empty path to a hard-coded path associated to a component that redirects to ':id' programmatically (using router.navigate())...

Route without parameter value; Angular route redirect - Can I use redirectTo to parameter path?

3 Answers3

Linked