title: Conditionally load module on the empty path in Angular router
body: <p>I'm trying to load the home page of my app for visitors who are not authenticated.</p>
  
  <pre><code>const routes: Routes = [
      { path: '', loadChildren: './home/home.module#HomeModule' }
  ...
  </code></pre>
  
  <p>Authenticated users should get their feed via that module, also on the empty path.</p>
  
  <pre><code>{ path: '', loadChildren: './feed/feed.module#FeedModule', canActivate: [IsAuthenticationGuard] },
  { path: '', loadChildren: './home/home.module#HomeModule', canActivate: [NoAuthenticationGuard] },
  </code></pre>
  
  <p>I would expect that <code>IsAuthenticationGuard</code> would fail and load the default home component.</p>
  
  <p>Instead it DOES download the feed module package (shown in the network tab) but loads nothing in the router outlet. Very confusing. </p>
  
  <p><strong>How can I do conditional routing (based on guards or otherwise) on the empty path?</strong></p>
  
  <p>Update: Here are the guards by request</p>
  
  <pre><code>@Injectable()
  export class IsAuthenticationGuard implements CanActivate {
      constructor(
          private authenticationService: AuthenticationService
      ) { }
  
      public canActivate(
          route: ActivatedRouteSnapshot,
          state: RouterStateSnapshot
      ): Observable&lt;boolean&gt; {
          return this.authenticationService.isAuthenticated.pipe(take(1), map((isAuthentication) =&gt; {
              return isAuthentication;
          }));
      }
  }
  </code></pre>
  
  <p>I've researched the new <code>urlTree</code> and it's cool that you can now redirect via the route instead of within the guard. <strong>However, redirects don't seem applicable if you're trying to use the same route with a different module.</strong> Plz correct me if there is a way.</p>