title: Angular 2: How to conditionally load a Component in a Route asynchronously?
body: <p>I'd like to attach a component to a route asynchronously, <strong>given a condition</strong>.</p>
  
  <p>The following example, which works (but is asynchronous), loads one component or another depending on the user role:</p>
  
  <pre><code>import { UserDashboardComponent }  from './user-dashboard.component'
  import { AdminDashboardComponent } from './admin-dashboard.component'
  
  const role = 'admin' // Just for the example
  const comp = role === 'admin' ? AdminDashboardComponent : UserDashboardComponent
  
  const routes: Routes = [
    { path: '', component: comp },
  ]
  </code></pre>
  
  <p>But, let's say we want to retrieve the role <strong>from an API, thus asynchronous</strong>. What's the way to accomplish that?</p>