title: CanActivate vs. CanActivateChild with component-less routes
body: <p>The angular2 documentation about <a href="https://angular.io/docs/ts/latest/guide/router.html#!#guards" rel="noreferrer">Route Guards</a> left me unclear about when it is appropriate to use a <code>CanActivate</code> guards vs. a <code>CanActivateChild</code> guard in combination with component-less routes. </p>
  
  <p><strong>TL;DR:</strong>  what's the point in having <code>canActivateChild</code> when I can use a component-less routes with <code>canActivate</code> to achieve the same effect?</p>
  
  <p>Long version: </p>
  
  <blockquote>
    <p>We can have multiple guards at every level of a routing hierarchy. The
    router checks the CanDeactivate and CanActivateChild guards first,
    from deepest child route to the top. Then it checks the CanActivate
    guards from the top down to the deepest child route.</p>
  </blockquote>
  
  <p>I get that <code>CanActivateChild</code> is checked bottom up and <code>CanActivate</code> is checked top down. What doesn't make sense to me is the following example given in the docs: </p>
  
  <pre><code>@NgModule({    
    imports: [
      RouterModule.forChild([
        {
          path: 'admin',
          component: AdminComponent,
          canActivate: [AuthGuard],
          children: [
            {
              path: '',
              canActivateChild: [AuthGuard],
              children: [
                { path: 'crises', component: ManageCrisesComponent },
                { path: 'heroes', component: ManageHeroesComponent },
                { path: '', component: AdminDashboardComponent }
              ]
            }
          ]
        }
      ])
    ],
    exports: [
      RouterModule
    ]
  })
  export class AdminRoutingModule {}
  </code></pre>
  
  <p>So the <code>admin</code> path has a component-less route: </p>
  
  <blockquote>
    <p>Looking at our child route under the AdminComponent, we have a route
    with a path and a children property but it's not using a component. We
    haven't made a mistake in our configuration, because we can use a
    component-less route.</p>
  </blockquote>
  
  <p>Why is the code in this case inserting the <code>AuthGuard</code> in the child and in the root component (path <code>admin</code>)? Wouldn't is suffice to guard at the root? </p>
  
  <p>I have created a <a href="http://plnkr.co/edit/B6s8H17q3pGDp2QAqKIU" rel="noreferrer">plunkr</a> based on the sample that removes the <code>canActivateChild: [AuthGuard]</code> and adds a logout button on the <code>AdminDashboard</code>. Sure enough, the <code>canActivate</code> of the parent route still guards, so what's the point in having <code>canActivateChild</code> when I can use component-less routes with <code>canActivate</code>?</p>