title: Angular2 RC6: '<component> is not a known element'
body: <p>I am getting the following error in the browser console when trying to run my Angular 2 RC6 app:</p>
  
  <pre><code>&gt; Error: Template parse errors: 'header-area' is not a known element:
  &gt; 1. If 'header-area' is an Angular component, then verify that it is part of this module.
  &gt; 2. If 'header-area' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component
  &gt; to suppress this message.("
  
      &lt;div class="page-container"&gt;
          [ERROR-&gt;]&lt;header-area&gt;&lt;/header-area&gt;
          &lt;div class="container-fluid"&gt;
  
  &gt; "): PlannerComponent@1:2
  </code></pre>
  
  <p>I don't get why the component isn't found. My PlannerModule looks like this:</p>
  
  <pre><code>@NgModule({
    declarations: [
      PlannerComponent,
      HeaderAreaComponent,
      NavbarAreaComponent,
      EreignisbarAreaComponent,
      GraphAreaComponent,
      nvD3
      ],
    imports: [
      RouterModule,
      CommonModule,
      ModalModule
      ],
    bootstrap: [PlannerComponent],
  })
  export class PlannerModule {}
  </code></pre>
  
  <p>and as far as I understood the concept of Modules in ng2, the parts of the modules are declared in 'declarations'. For completeness, here is the PlannerComponent:</p>
  
  <pre><code>@Component({
    selector: 'planner',
    providers: [CalculationService],
    templateUrl: './planner.component.html',
    styleUrls: ['./planner.component.styl']
  })
  export default class PlannerComponent {
  }
  </code></pre>
  
  <p>and the HeaderAreaComponent:</p>
  
  <pre><code>@Component({
    selector: 'header-area',
    templateUrl: './header-area.component.html',
    styleUrls: ['./header-area.component.styl']
  })
  export default class HeaderAreaComponent {
  }
  </code></pre>
  
  <p>The <code>&lt;header-area&gt;</code>-Tag is located in planner.component.html:</p>
  
  <pre><code>&lt;div class="page-container"&gt;
    &lt;header-area&gt;&lt;/header-area&gt;
    &lt;div class="container-fluid"&gt;
  
      &lt;div class="row"&gt;...
  </code></pre>
  
  <p>Did I get something wrong?</p>
  
  <p><strong>Update</strong>: Complete code</p>
  
  <p>planner.module.ts:</p>
  
  <pre><code>import HeaderAreaComponent from '../header-area/header-area.component';
  import NavbarAreaComponent from '../navbar-area/navbar-area.component';
  import GraphAreaComponent from '../graph-area/graph-area.component';
  import EreignisbarAreaComponent from '../ereignisbar-area/ereignisbar-area.component';
  import PlannerComponent from './planner.component';
  import {NgModule} from '@angular/core';
  import {nvD3} from 'ng2-nvd3';
  import {RouterModule} from '@angular/router';
  import {CommonModule} from '@angular/common';
  import {ModalModule} from 'ng2-bootstrap/ng2-bootstrap';
  
  @NgModule({
    declarations: [
      PlannerComponent,
      HeaderAreaComponent,
      NavbarAreaComponent,
      EreignisbarAreaComponent,
      GraphAreaComponent,
      nvD3
    ],
    imports: [
      RouterModule,
      CommonModule,
      ModalModule
    ],
    bootstrap: [PlannerComponent],
  })
  export class PlannerModule {
    // TODO: get rid of the "unused class" warning
  }
  </code></pre>
  
  <p>planner.component.ts</p>
  
  <pre><code>import {Component} from '@angular/core';
  import CalculationService from '../_shared/services/calculation.service/calculation.service';
  import HeaderAreaComponent from '../header-area/header-area.component';
  
  @Component({
    selector: 'planner',
    providers: [CalculationService],
    templateUrl: './planner.component.html',
    styleUrls: ['./planner.component.styl']
  })
  export default class PlannerComponent {
  }
  </code></pre>
  
  <p>planner.component.html</p>
  
  <pre><code>&lt;div class="page-container"&gt;
    &lt;header-area&gt;&lt;/header-area&gt;
    &lt;div class="container-fluid"&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-xs-2 col-sm-1 sidebar"&gt;
          &lt;navbar-area&gt;&lt;/navbar-area&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-10 col-sm-11"&gt;
          &lt;graph-area&gt;&lt;/graph-area&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;!--/.row--&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-xs-10 col-sm-11 offset-sm-1"&gt;
          &lt;ereignisbar-area&gt;&lt;/ereignisbar-area&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;!--/.row--&gt;
  
    &lt;/div&gt;&lt;!--/.container--&gt;
  &lt;/div&gt;&lt;!--/.page-container--&gt;
  </code></pre>