title: Browser totally blocked when I use guard children route in Angular 2
body: <p>When I use <strong>RoleGuard</strong> in my '<strong>pre-harvest</strong>' children path and I open the browser the browser is totally blocked, it seems that is in an infinite loop. I don't have any compilation problem and I can't open the console to see what errors I have.</p>
  
  <p>Is possible to use canActivate in children paths? or should I use CanActivateChild? I don't have this problem with CanActivateChild.</p>
  
  <pre><code>const preHarvestRoutes: Routes = [
    {
      path: '',
      component: PrivateComponent,
      canActivate: [AuthGuard],
      children: [
        {
          path: 'pre-harvest',
          component: PreHarvestComponent,
          canActivate: [RoleGuard],  &lt;------- IF I REMOVE THIS I DO NOT HAVE ANY PROBLEM.
          children: [
            {
              path: 'new-field',
              component: NewFieldComponent
            },
          ]
        }
      ]
    }
  ];
  </code></pre>
  
  <p>RoleGuard:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
  import { UserRolesService } from '../services/user-roles.service';
  import { webStorage } from "../utils/web-storage";
  
  @Injectable()
  export class RoleGuard implements CanActivate    {
  
      constructor(
          private userRoles: UserRolesService
          , private router: Router
      ) { }
  
      canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot )    {
          //let roles = route.data['roles'] as Array&lt;string&gt;;
          //let rolesUserLogged = webStorage.user;
  
          this.router.navigate( ['pre-harvest'] );
  
          return true;
      }
  }
  </code></pre>