Angular2 RC6: ' <component> n'est pas un élément connu '

Question

J'obtiens l'erreur suivante lorsque dans le navigateur de la console lors de l'exécution de mon Angulaire 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

Je ne comprends pas pourquoi la composante n'a pas été trouvé. Mon PlannerModule ressemble à ceci:

@NgModule({
  declarations: [
    PlannerComponent,
    HeaderAreaComponent,
    NavbarAreaComponent,
    EreignisbarAreaComponent,
    GraphAreaComponent,
    nvD3
    ],
  imports: [
    RouterModule,
    CommonModule,
    ModalModule
    ],
  bootstrap: [PlannerComponent],
})
export class PlannerModule {}

et que j'ai compris le concept de Modules dans ng2, les parties de l'modules sont déclarées dans les déclarations des'. Pour être complet, voici la PlannerComponent:

@Component({
  selector: 'planner',
  providers: [CalculationService],
  templateUrl: './planner.component.html',
  styleUrls: ['./planner.component.styl']
})
export default class PlannerComponent {
}

et le HeaderAreaComponent:

@Component({
  selector: 'header-area',
  templateUrl: './header-area.component.html',
  styleUrls: ['./header-area.component.styl']
})
export default class HeaderAreaComponent {
}

L' <header-area>-Tag est situé dans planner.component.html:

<div class="page-container">
  <header-area></header-area>
  <div class="container-fluid">

    <div class="row">...

Ai-je quelque chose de mal?

Mise à jour: le code Complet

planner.le 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.composante.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-->

Answer 1

J'ai reçu cette erreur lorsque j'ai importé le module A dans le module B, puis j'ai essayé d'utiliser un composant du module A du module B.

Il s’agissait de déclarer ce composant dans mon tableau exports .

 @NgModule({
  declarations: [
    MyComponent
  ],
  exports: [
    MyComponent
  ]
})
export class ModuleA {}
 

 @NgModule({
  imports: [
    ModuleA
  ]
})
export class ModuleB {}
 

Answer 2

Je l'ai corrigé avec l'aide de Sanket de réponse et les commentaires.

Ce que vous ne pouvait pas savoir et n'était pas évident dans le Message d'Erreur est: j'ai importé le PlannerComponent comme @NgModule.déclaration de mon Application Module (= RootModule).

L'erreur a été corrigée par l'importation de la PlannerModule comme @NgModule.les importations.

Avant:

@NgModule({
  declarations: [
    AppComponent,
    PlannerComponent,
    ProfilAreaComponent,
    HeaderAreaComponent,
    NavbarAreaComponent,
    GraphAreaComponent,
    EreignisbarAreaComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routeConfig),
    PlannerModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {

Après:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routeConfig),
    PlannerModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Merci pour votre aide :)

Answer 3

Si vous avez utilisé la définition de composant générée automatiquement par Webclipse, il est possible que le nom du sélecteur soit précédé de 'app'. Apparemment, il s'agit d'une nouvelle convention lors de la déclaration de sous-composants d'un composant principal de l'application. Vérifiez la manière dont votre sélecteur a été défini dans votre composant si vous avez utilisé "nouveau" - "composant" pour le créer dans Angular IDE. Donc au lieu de mettre

 <header-area></header-area>
 

Tu pourrais avoir besoin de

 <app-header-area></app-header-area>
 

Answer 4

Dans votre composant de planification , vous devez manquer d'importer HeaderAreaComponent comme ceci-

 import { HeaderAreaComponent } from '../header-area.component'; 
//change path according your project
 

Assurez-vous également que tous les composants et tous les tuyaux doivent être déclarés via un NgModule .

Voir si cela aide.

Answer 5

J'ai eu le même problème avec angular RC.6 pour une raison quelconque, il ne permet pas de passer de composant à un autre composant à l'aide de directives comme décorateur de composant au composant parent

Mais si vous importez le composant enfant via le module d'application et que vous l'ajoutez dans le tableau de déclaration, l'erreur disparaît. Il n’ya pas beaucoup d’explications sur la raison pour laquelle il s’agit d’un problème lié à rc.6 angulaire.