I am getting the following error in the browser console when trying to run my Angular 2 RC6 app:
> Error: Template parse errors: 'header-area' is not a known element:
> 1. If 'header-area' is an Angular component, then verify that it is part of this module.
> 2. If 'header-area' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component
> to suppress this message.("
<div class="page-container">
[ERROR->]<header-area></header-area>
<div class="container-fluid">
> "): PlannerComponent@1:2
I don't get why the component isn't found. My PlannerModule looks like this:
@NgModule({
declarations: [
PlannerComponent,
HeaderAreaComponent,
NavbarAreaComponent,
EreignisbarAreaComponent,
GraphAreaComponent,
nvD3
],
imports: [
RouterModule,
CommonModule,
ModalModule
],
bootstrap: [PlannerComponent],
})
export class PlannerModule {}
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:
@Component({
selector: 'planner',
providers: [CalculationService],
templateUrl: './planner.component.html',
styleUrls: ['./planner.component.styl']
})
export default class PlannerComponent {
}
and the HeaderAreaComponent:
@Component({
selector: 'header-area',
templateUrl: './header-area.component.html',
styleUrls: ['./header-area.component.styl']
})
export default class HeaderAreaComponent {
}
The <header-area>
-Tag is located in planner.component.html:
<div class="page-container">
<header-area></header-area>
<div class="container-fluid">
<div class="row">...
Did I get something wrong?
Update: Complete code
planner.module.ts:
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
}
planner.component.ts
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 {
}
planner.component.html
<div class="page-container">
<header-area></header-area>
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-sm-1 sidebar">
<navbar-area></navbar-area>
</div>
<div class="col-xs-10 col-sm-11">
<graph-area></graph-area>
</div>
</div><!--/.row-->
<div class="row">
<div class="col-xs-10 col-sm-11 offset-sm-1">
<ereignisbar-area></ereignisbar-area>
</div>
</div><!--/.row-->
</div><!--/.container-->
</div><!--/.page-container-->
See Question&Answers more detail:
os