Angular 2: How to conditionally load a Component in a Route asynchronously?
<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>