title: Header and footer not displayed on pages
body: <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>