Header and footer not displayed on pages
<p>I want to display a <em>header</em> and <em>footer</em> on each page/route in my app.</p>

<p><code>&lt;header&gt;</code> and <code>&lt;footer&gt;</code> are both components with a html view defined, and they are correctly displayed in templates without a <code>&lt;router-outlet&gt;</code> tag present.</p>

<p>But when used in conjuction with a <code>&lt;router-outlet&gt;</code></p>

<pre><code>import { Component } from "angular2/core";
import { LoginComponent } from "./login/component/login.component";
import { DemoPageComponent } from "./demo_page/demo_page.component";
import {TaskPageComponent} from "./task/component/task_page.component";
import {
    ROUTER_DIRECTIVES,
    ROUTER_PROVIDERS,
    HashLocationStrategy,
    LocationStrategy,
    Router,
    RouteConfig,
    ComponentInstruction
} from 'angular2/router';
import {Header} from "./components/core/header/header.component";
import {HeaderSecondary} from "./components/core/header_secondary/HeaderSecondary";
import {Footer} from "./components/core/footer/footer.component";

@Component({
    selector: 'app',
    directives: [ROUTER_DIRECTIVES, Header, HeaderSecondary, Footer],
    template: `
    &lt;header&gt;&lt;/header&gt;
    &lt;header-secondary&gt;&lt;/header-secondary&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;footer&gt;&lt;/footer&gt;
    `
})

@RouteConfig([
    { path: '/', name: 'Root', redirectTo: ['Login'] },
    { path: '/login', name: 'Login', component: LoginComponent },
    { path: '/demoPage', name: 'DemoPage', component: DemoPageComponent },
    { path: '/tasks', name: 'TaskPage', component: TaskPageComponent }

])

export class App {
    constructor(public router: Router) { }
}
</code></pre>

<p>the header/footer views aren't rendered.</p>

<p>My loaded DOM look like this </p>

<p><a href="https://i.stack.imgur.com/KaMOy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KaMOy.png" alt="enter image description here"></a></p>

<p>I cannot expand the header html, like it wasn't properly loaded, whereas my <code>&lt;demo-page&gt;</code> component was loaded correctly.</p>

<p>Any advice, why the header/footer pair was not loaded up correctly?</p>