Using redirectTo in a nested

Question

I have this very simple router config:

export const routes: Routes = [
  {
    path: '',
    component: MiddleComponent,
    pathMatch: 'full',
    children: [
      {
        path: '',
        redirectTo: './task-queue',
        pathMatch: 'full',
      },
      {
        path: 'task-queue',
        component: TestComponent,
      },
    ]
  },
];

Demo: https://stackblitz.com/edit/angular-a7sxdf?file=app%2Fapp.routing.ts

Where MiddleComponent's template is just <router-outlet></router-outlet>.

I'd expect that after page load I should be redirected to task-queue but I'm not. I can see the MiddleComponent is rendered but TestComponent isn't.

For starters I would say that children routers woud be best defined in separate router modules — An-droid, Jun 22 '18 at 13:57
It may seems so, but dealing with a router issue in angular the way you implement it can change drastically the way it behaves — An-droid, Jun 22 '18 at 14:16

Sachila Ranawaka · Answer 1 · 2018-06-22T14:07:23.913

2

Need to add another path with redirect property for test-queue.

export const routes: Routes = [
  { path: '', redirectTo: '/task-queue' ,
    pathMatch: 'full'},
  { path: '', component: MiddleComponent,
    children: [
      { path: '', redirectTo: '/task-queue',pathMatch: 'full' },
      { path: 'task-queue', component: TestComponent }
    ] 
  }
];

Demo

edited Jun 22 '18 at 14:07

answered Jun 22 '18 at 13:56

Sachila Ranawaka

39,756
7
56
80

I don't want to navigate myself. – martin Jun 22 '18 at 13:59

score 2 · Answer 2 · answered Jun 22 '18 at 14:19

You can try this changing pathMatch to prefix for the parent route and removing the ./ in the child route

(Angular documentation for redirecting)

export const routes: Routes = [
  {
    path: '',
    component: MiddleComponent,
    pathMatch: 'prefix',
    children: [
      {
        path: '',
        redirectTo: 'task-queue',
        pathMatch: 'full',
      },
      {
        path: 'task-queue',
        component: TestComponent,
      },
    ]
  },
];

I got that solution from reading https://github.com/angular/angular/issues/14692 (this does not seem to only apply to lazy routes)

Modified stackblitz

But the solution if redirecting straight away to /task-queue from the parent works too

Using redirectTo in a nested

2 Answers2

Linked