title: When and How to use Guards in Lazy Loading routes with Angular TS
body: <p>I am trying to build an application using Angular 9 and in my</p>
  
  <p><strong>app-routing.module.ts</strong></p>
  
  <pre><code>  const routes: Routes = [
  {
      path: '', canActivate:[GuestGuard], component: BlankComponent,  children:[
          {path:'', loadChildren: () =&gt; import('./user/user.module').then(m =&gt; m.UserModule)}
      ],
  
  
  },
  {
      path: '', canActivate:[AuthGuard], component: UserComponent,  children: [
      {path: 'dashboard', component: DashboardComponent},
      {path:'', children:[
      {path: 'roles',  loadChildren: () =&gt; import('./roles/roles.module').then(m =&gt; m.RolesModule), },  
  
  
  }
      ]
  },
      { path: '**', redirectTo: '', pathMatch: 'full' },
  ];
  </code></pre>
  
  <p><strong>guest-guard.ts</strong></p>
  
  <p>Used to block users who are already logged in</p>
  
  <pre><code>export class GuestGuard implements CanActivate, CanLoad {
      constructor(private auth:Auth, private router:Router){}
      canActivate(
      next: ActivatedRouteSnapshot,
      state: RouterStateSnapshot): Observable&lt;boolean | UrlTree&gt; | Promise&lt;boolean | UrlTree&gt; | boolean | UrlTree {
          const userLoggedIn = this.auth.isLoggedIn();
          if(userLoggedIn){
          this.router.navigateByUrl('dashboard');
          return false;
          }
          return true;
      }
      canLoad(
      route: Route,
      segments: UrlSegment[]): Observable&lt;boolean&gt; | Promise&lt;boolean&gt; | boolean {
          const userLoggedIn = this.auth.isLoggedIn();
          if(userLoggedIn){
          this.router.navigateByUrl('dashboard');
          return false;
          }
          return true;
      }
  }
  </code></pre>
  
  <p><strong>auth-guard.ts</strong></p>
  
  <p>Allow access to users logged in (inverse of guest)</p>
  
  <pre><code>export class AuthGuard implements CanActivate, CanLoad {
      constructor(private auth:Auth, private router:Router){}
  
      canActivate(
      next: ActivatedRouteSnapshot,
      state: RouterStateSnapshot): Observable&lt;boolean | UrlTree&gt; | Promise&lt;boolean | UrlTree&gt; | boolean | UrlTree {
          const userLoggedIn = this.auth.isLoggedIn();
          if(!userLoggedIn){
          this.router.navigateByUrl('/');
          return false;
          }
          return true;
      }
      canLoad(
      route: Route,
      segments: UrlSegment[]): Observable&lt;boolean&gt; | Promise&lt;boolean&gt; | boolean {
          const userLoggedIn = this.auth.isLoggedIn();
          if(!userLoggedIn){
          this.router.navigateByUrl('/');
          return false;
          }
          return true;
      }
  }
  </code></pre>
  
  <p>Above code is working fine as expected. But when i use canLoad on the guest path, i get</p>
  
  <pre><code>Throttling navigation to prevent the browser from hanging. See &lt;URL&gt;.
  </code></pre>
  
  <p>For loggedin user path, the canLoad function is not executed (tested by using console.log) </p>
  
  <p>When should canLoad be used?</p>