Search code examples
angularlazy-loadingangular-routing

Angular routing redirectTo doesn't work with Lazy Loading

I work on Angular project and for now I have only one lazy loaded module. When I try to reach localhost:4200/budget I want it to redirect to localhost:4200/budget/expenses. Budget is lazy loaded component. But when I try:

path: '',
component: BudgetComponentComponent,
redirectTo: 'expenses',
children: [
  {
    path: 'expenses',
    pathMatch: 'full',
    component: ExpensesComponent,
  },
  {
    path: 'income',
    pathMatch: 'full',
    component: IncomeComponent
  }
  // { path: '**', component:  Page404Component}
]

it gives me this: enter image description here

my main routing file: enter image description here

Solution 
  • path: '',
component: BudgetComponentComponent,
children: [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'expenses',
  {
    path: 'expenses',
    component: ExpensesComponent,
  },
  {
    path: 'income',
    pathMatch: 'full',
    component: IncomeComponent
  }
  // { path: '**', component:  Page404Component}
]