title: Angular 2 different components with same route
body: <p>I have an application, which need to separate authenticated and guest users components. But I need, that both components will be loaded by '/' route. I wrote</p>
  
  <pre><code>{
      path: 'desktop',
      loadChildren: 'app/member/member.module#MemberModule',
      canActivate: [LoggedInGuard],
  },
  {
      path: '',
      loadChildren: 'app/guest/guest.module#GuestModule',
      canActivate: [GuestGuard],
  },
  </code></pre>
  
  <p>And it works. But how to make, that both component load by same url?
  I had tried to write <code>path: ''</code> for Member's module route, but the second router rule is not performed.
  Here are guards code:</p>
  
  <p><strong>LoggedInGuard:</strong></p>
  
  <pre><code>canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
      if(this.sessionService.isLoggedIn()) {
          return true;
      } else {
          return false;
      }
  }
  </code></pre>
  
  <p><strong>GuestGuard:</strong></p>
  
  <pre><code>canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
      if(!this.sessionService.isLoggedIn()) {
          return true;
      } else {
          return false;
      }
  }
  </code></pre>
  
  <p>Here is a plunker: <a href="http://embed.plnkr.co/VaiibEVGE79QU8toWSg6/" rel="noreferrer">http://embed.plnkr.co/VaiibEVGE79QU8toWSg6/</a></p>
  
  <p>How should I do it properly? Thank you</p>