Angular2 RC6: '<component> is not a known element'
<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>