Is CanLoad guard usable within Electron application?

Question

I have permission DTO coming from BE which determines parts of application accessible to the user. Using NgRx selector I want to use it inside the CanLoad guard but I can't get it to work.

routes.ts

{
  path: 'acquisition',
  canLoad: [AcquisitionGuard],
  loadChildren: () => import('./acquisition/acquisition.module').then(m => m.AcquisitionModule),
  pathMatch: 'full',
},

The guard:

canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {
  console.log('canLoad guard'); //never fires
  return this.store.select(fromPermission.canAcess);
}

For some reason this guard never fires (tried with console.log and debugger). When I change it to canActive and do it in the 'parent' routes file it doesn't fire either. The only time it fires is when I change it to canActive and move it to 'child' routes.file

acquisition.routes.ts

{
  path: 'acquisition',
  canActive: [AcquisitionGuard], //This is the only time I'll get some response from the guard
  component: AcquisitionComponent,
  children: [...],
},

EDIT: It looks like this is caused by the fact, that once the module is loaded 'CanLoad' guard is not fired again. Is it possible that Electron loads everything at once and thus this guard can't be called?

Answer 1

You can define the acquisition routes as children in the module and add canActivateChild that will handle the guarding for all the of the routes for this module.

// acquisition.module.ts

const acquisitionRoutes: Routes = [
    {
        path: '',
        canActivate: [AuthGuard],
        canActivateChild: [AuthGuard],
        children: [
           ...
        ]
    },
];

// app.routing.ts
 {
     path: 'acquisition',
     loadChildren: () => import('./acquisition/acquisition.module').then(m => m.AcquisitionModule),
     pathMatch: 'full',
};

Check out this answer: Lazy load module with Router Guard with dynamic routes in Angular4