How to redirect to dashboard when you have lazy loaded modules with empty paths in Angular?

Question

I have a problem with the routing in Angular 9. This is the app routing module:

const routes: Routes = [
   { path: '', loadChildren: () => HomeModule, canActivate: [AuthGuard] },
   { path: 'login', component: LoginComponent },
   { path: 'register', component: RegisterComponent, canDeactivate: [CanDeactivateGuard] },
   { path: 'payment', component: PaymentComponent },
];

@NgModule({
   imports: [
       RouterModule.forRoot(routes, { enableTracing: true })
   ],
   exports: [RouterModule]
})

export class AppRoutingModule {}

Here the home routing from the HomeModule loaded lazy:

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      { path: 'dashboard', component: DashboardComponent, canActivate: [CloseDrawerGuard] },
      { path: 'zones', component: ZonesComponent, canActivate: [CloseDrawerGuard] },
      { path: 'workplaces', component: WorkplacesComponent, canActivate: [CloseDrawerGuard] },
      { path: 'user_management', loadChildren: () => UserManagementModule },
      { path: 'tenant_management', loadChildren: () => TenantManagementModule },
      { path: 'schedules', component: SchedulesComponent, canActivate: [CloseDrawerGuard] },
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    ]
  }
];


@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})

export class HomeRoutingModule {}

The usermanagement routing from the UserManagementModule loaded lazy.

const routes: Routes = [
    { path: '', component: UserManagementComponent,
    children: [
        { path: '', redirectTo: 'list', pathMatch: 'full' },
        { path: 'list', component: UserListManagementComponent, canActivate: [CloseDrawerGuard] },
        { path: 'grid', component: UserGridManagementComponent, canActivate: [CloseDrawerGuard] }
    ]}
];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [RouterModule]
})

export class UserManagementRoutingModule {}

And finally the routing of the TenantManagementModule (lazy load as well).

const routes: Routes = [
    { path: '', component: TenantUpdateComponent, canActivate: [CloseDrawerGuard] },
    { path: 'invoices', component: InvoicesComponent, canActivate: [CloseDrawerGuard] },
    { path: 'subscription', component: SubscriptionComponent, canActivate: [CloseDrawerGuard] },
];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [RouterModule]
})
export class TenantManagementRoutingModule {}

The problem is when the user enter the base url (spa/) it should redirect to spa/dashboard, instead of that is redirecting to spa/ and shows the TenantUpdateComponent because it has the empty path. But the empty path should be just evaluated if you are in the route 'spa/tenant_management' but not if you are in the base route '/spa'. It should redirect to dashboard, that's why I defined this route in the home-routing:

{ path: '', redirectTo: 'dashboard', pathMatch: 'full' }

Also, you can access to the route 'spa/list' but it shouldn't exist the route. It should work if you enter 'spa/user_management/list', if not I want to redirect the user to the dashboard.

Thanks in advance.

Answer 1

You will have to add a catch all route on your AppRoutingModule.

{
    // Default all the unmapped URLs to the dashboard as default
    path: '**',
    redirectTo: '/dashboard',
    pathMatch: 'full',
}

Answer 2

please try this and check if it works, it worked for me, change below line:

{ path: '', redirectTo: 'dashboard', pathMatch: 'full' }

to

{ path: '', component: 'DashboardComponent'}

and make that as 1st entry in children[]