title: Angular 2+ : canLoad usage
body: <p>I'm trying to use the <code>canLoad</code> function with routes, but it doesn't seem to work. </p>
  
  <p>I don't know why, maybe you can't use it with <code>canActivate</code> or something, but since I don't know, I thought someone would here. </p>
  
  <p>The code runs, when serving with aot compilation I get this : </p>
  
  <pre><code>chunk {admin.module} admin.module.chunk.js, admin.module.chunk.js.map () 28 kB {main} {pilotage.module} {suiviprod.module}
  chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry]
  chunk {main} main.bundle.js, main.bundle.js.map (main) 3.5 MB {vendor} [initial]
  chunk {pilotage.module} pilotage.module.chunk.js, pilotage.module.chunk.js.map () 17.2 kB {admin.module} {main} {suiviprod.module}
  chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 267 kB {inline} [initial]
  chunk {suiviprod.module} suiviprod.module.chunk.js, suiviprod.module.chunk.js.map () 20.4 kB {admin.module} {main} {pilotage.module}
  chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 5.52 MB [initial]
  </code></pre>
  
  <p>But when I go to the modules, the console log isn't done. </p>
  
  <p>Here is the code of my routes : </p>
  
  <p><strong>logged.module</strong> (main routing, see it as app.module)</p>
  
  <pre class="lang-js prettyprint-override"><code>export const loggedRoutes: Routes = [
    {
      path: 'logged', component: LoggedComponent, canActivate: [AuthGuardService], canActivateChild: [AuthGuardService], children: [
        { path: 'profile', component: ProfileComponent, children: [] },
        ...adminRoutes,
        ...mainRoutes,
        ...pilotageRoutes,
        ...suiviProdRoutes,
        { path: 'admin', loadChildren: 'app/logged/admin/admin.module#AdminModule', canLoad: [AdminGuardService] },
        { path: 'pilotage', loadChildren: 'app/logged/pilotage/pilotage.module#PilotageModule', canLoad: [AdminGuardService] },
        { path: 'suiviprod', loadChildren: 'app/logged/suiviprod/suiviprod.module#SuiviprodModule', canLoad: [AdminGuardService] },
        { path: '', redirectTo: '/logged/main/error', pathMatch: 'prefix' }
      ]
    },
  ];
  </code></pre>
  
  <p><strong>admin.module</strong> (suiviprod and pilotage are the same, just with different routes &amp; components)</p>
  
  <pre class="lang-js prettyprint-override"><code>export const adminRoutes: Routes = [
    {
      path: 'admin', component: AdminComponent, canActivate: [AdminGuardService], canActivateChild: [AdminGuardService], children: [
        { path: 'validation', component: ValidationComponent, children: [] },
        { path: 'dashboard', component: DashboardComponent, children: [] },
        { path: 'user/:id', component: UserComponent, children: [] },
        { path: 'users', component: UsersComponent, children: [] },
        { path: 'params', component: ParamsComponent, children: [] },
        { path: 'journals', component: JournalsComponent, children: [] },
        { path: 'purge', component: PurgeComponent, children: [] },
        { path: 'groups', component: GroupsComponent, children: [] },
        { path: 'configs', component: ConfigurationComponent, children: [] },
        { path: 'applications', component: ApplicationsComponent, children: [] },
        { path: '', redirectTo: '/logged/admin/dashboard', pathMatch: 'prefix' }
      ]
    },
  ];
  </code></pre>
  
  <p><strong>authguard.service</strong> (canActivate returns true if the local storage has a token)</p>
  
  <pre class="lang-js prettyprint-override"><code>@Injectable()
  export class AdminGuardService implements CanActivate, CanActivateChild, CanLoad {
    jwtHelper: JwtHelper = new JwtHelper();
    constructor(private router: Router, private alerter: AlertService) { }
    // tslint:disable-next-line:max-line-length
    canActivate(route?: ActivatedRouteSnapshot, state?: RouterStateSnapshot): boolean { return canActivate(route, state, this, [global.roles.admin]); }
    canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { return this.canActivate(route, state); }
    canLoad(route: Route): boolean { console.log('coucou'); return canActivate(null, null, this, [global.roles.admin]); }
  }
  </code></pre>
  
  <p><strong>EDIT</strong> The <code>canActivate</code> function, used by the guard (that works well for <code>canActivate</code> and <code>canActivateChild</code>) : </p>
  
  <pre class="lang-js prettyprint-override"><code>export function canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot, caller: any, userRoles: string[]): boolean {
    try {
      // Get the token
      let token = localStorage.getItem('jwt');
  
      // If no token found, not connected
      if (!token) {
        caller.alerter.error(`Vous n'êtes pas connecté`);
        caller.router.navigate(['/login']);
        return false;
      }
  
      // Try to get roles. If it fails, not a valid token.
      let decodedToken = caller.jwtHelper.decodeToken(token);
      let roles: Array&lt;String&gt; = decodedToken.roles.split(',');
  
      // return true if any role is found
      let found = false;
      for (let role of userRoles) {
        if (roles.indexOf(role) &gt;= 0) { found = true; }
      }
      if (found) { return true; }
  
      // Role not found =&gt; Unauthorized
      caller.alerter.error(`Autorisation manquante`);
      caller.router.navigate(['/logged/main']);
      return false;
  
    } catch (ex) {
      // Catch the JWT errors
      caller.alerter.error(`La session utilisateur est corrompue`);
      caller.router.navigate(['/login']);
      return false;
    }
  }
  </code></pre>