Angular guard CanLoad triggers only once upon first lazy load

Question

I've got a simple guard on my admin area

{
    path: 'admin',
    canLoad: [AuthGuard, AccountGuard],
    loadChildren: () =>
      import('./features/admin/admin.module').then((m) => m.AdminModule),
    data: { preload: false }
  },

It works nice the first time I do login but if I do logout and than login again it doesn't work so I ended up with

{
    path: 'admin',
    canLoad: [AuthGuard, AccountGuard],
    canActivate: [AuthGuard, AccountGuard],
    loadChildren: () =>
      import('./features/admin/admin.module').then((m) => m.AdminModule),
    data: { preload: false }
  },

I'm wondering is there a better way?

for login purposes you normally use canActivate. Why exactly you want to use canLoad? — Panagiotis Bougioukos, Mar 01 '21 at 19:11

score 0 · Answer 1 · answered Mar 01 '21 at 21:40

You can use CanLoad for the parent routes and CanActivate for lazy-loaded children. Because CanActivate will load the module anyway, no matter true or false was returned it's no sense to use it at the same time with CanLoad for the parent route, in that case, CanLoad does not give any effect. So try to use CanActivate for child routes only and CanLoad for parent route.

Angular guard CanLoad triggers only once upon first lazy load

1 Answers1