Angular2 Router error: cannot find primary outlet to load 'HomePage' : <p>I just started using the new routing library (@angular/router v3.0.0-alpha.7) but following the official <a href="https://angular.io/docs/ts/latest/guide/router.html">docs</a> leads to error below:</p>

<pre><code>browser_adapter.ts:74: EXCEPTION: Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'HomePage'
</code></pre>

<p><strong>Question is - how do I get rid of the error and make the router behave as expected? Have I missed a setting?</strong></p>

<p>(Same error appears when using the alpha.6 version.)</p>

<p><em>app.component.ts</em></p>

<pre><code>import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'app',
    template: `
        &lt;p&gt;Angular 2 is running...&lt;/p&gt;
        &lt;!-- Routed views go here --&gt;
        &lt;router-outlet&gt;&lt;/router-outlet&gt;
    `,
    providers: [ROUTER_DIRECTIVES]
})
export class AppComponent {
}
</code></pre>

<p><em>app.routes.ts</em></p>

<pre><code>import { provideRouter, RouterConfig } from '@angular/router';
import { HomePage } from './pages/home/home';

export const routes: RouterConfig = [
    { path: '', component: HomePage }
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];
</code></pre>

<p><em>home.ts</em></p>

<pre><code>import { Component } from '@angular/core';

@Component({
    template: '&lt;h1&gt;Home Page&lt;/h1&gt;'
})
export class HomePage {
}
</code></pre>

<p><em>main.ts</em></p>

<pre><code>/* Avoid: 'error TS2304: Cannot find name &lt;type&gt;' during compilation */
///&lt;reference path="../../typings/index.d.ts" /&gt;

import { bootstrap } from "@angular/platform-browser-dynamic";
import { APP_ROUTER_PROVIDERS } from './app.routes';
import { AppComponent } from "./app.component";

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS,
]).catch(err =&gt; console.error(err));
</code></pre>
