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

J'obtiens l'erreur suivante dans la console du navigateur lorsque j'essaye d'exécuter mon application Angular 2 RC6:

> 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 le composant n'est pas trouvé. Mon PlannerModule ressemble à ceci:

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

et pour autant que j'ai compris le concept de modules dans ng2, les parties des modules sont déclarées dans des «déclarations». Pour être complet, voici le 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 {
}

Le <header-area>-Tag se trouve dans planner.component.html:

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

    <div class="row">...

Est-ce que je me suis trompé?

Mise à jour : code complet

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-->

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 dans le module B.

La solution consiste à déclarer ce composant dans le exportstableau.

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

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

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

Ce que vous ne pouviez pas savoir et n'était pas apparent dans le message d'erreur est: J'ai importé le PlannerComponent en tant que @ NgModule.declaration dans mon module d'application (= RootModule).

L'erreur a été corrigée en important le PlannerModule sous le nom @ NgModule.imports .

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 de votre aide :)

Si vous avez utilisé la définition de composant générée automatiquement par Webclipse, vous constaterez peut-être que le nom du sélecteur est précédé de «app-». Apparemment, il s'agit d'une nouvelle convention lors de la déclaration des sous-composants d'un composant principal de l'application. Vérifiez comment 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>

Je récupère le même problème <flash-messages></flash-messages>avec angular 5.

Il vous suffit d'ajouter les lignes ci-dessous dans le fichier app.module.ts

import { ---, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FlashMessageModule } from "angular-flash-message";


@NgModule({
  ---------------
  imports: [
    FlashMessageModule,
    ------------------         
  ], 
  -----------------
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
  ------------
})

NB: j'utilise celui-ci pour les messages flash

Dans votre composant de planificateur , vous devez manquer l'importation HeaderAreaComponent comme ceci-

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

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

Voyez si cela aide.

J'étais confronté à ce problème sur Angular 7 et le problème était qu'après la création du module, je n'ai pas exécuté ng build. Alors j'ai joué -

• ng build
• ng serve

et cela a fonctionné.

L'erreur venant du test unitaire, lorsque le composant est hors de <router-outlet>la page principale de l'application. devrait donc définir le composant dans le fichier de test comme ci-dessous.

<app-header></app-header>
<router-outlet></router-outlet>

et doit ensuite ajouter le fichier spec.ts comme ci-dessous.

import { HeaderComponent } from './header/header.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        App`enter code here`Component,
        HeaderComponent <------------------------
      ],
    }).compileComponents();
  }));
});

Une autre cause possible du même message d'erreur est une incompatibilité entre le nom de la balise et le nom du sélecteur. Pour ce cas:

<header-area></header-area>le nom de la balise doit correspondre exactement 'header-area'à la déclaration du composant:

@Component({
  selector: 'header-area',

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

Mais si vous importez le composant enfant via le module d'application et l'ajoutez dans le tableau de déclaration, l'erreur disparaît. Il n'y a pas beaucoup d'explication sur pourquoi c'est un problème avec angular rc.6

Quand j'ai eu ce problème, c'était parce que j'utilisais 'templateUrl' au lieu de simplement 'template' dans le décorateur, puisque j'utilise webpack et que j'ai besoin d'utiliser require . Faites juste attention au nom du décorateur, dans mon cas, j'ai généré le code standard à l'aide d'un extrait de code, le décorateur a été créé comme:

@Component({
  selector: '',
  templateUrl: 'PATH_TO_TEMPLATE'
})

mais pour webpack, le décorateur doit être simplement ' template ' PAS ' templateUrl ', comme ceci:

@Component({
  selector: '',
  template: require('PATH_TO_TEMPLATE')
})

changer cela a résolu le problème pour moi.

voulez en savoir plus sur les deux méthodes? lire cet article sur templatevstemplateUrl

J'ai eu cette erreur lorsque j'avais un nom de fichier et une classe exportés incompatibles:

nom de fichier: list.component.ts

classe exportée: ListStudentsComponent

Le passage de ListStudentsComponent à ListComponent a résolu mon problème.

J'ai rencontré ce problème exact. Échec: erreurs d'analyse du modèle: 'app-login' n'est pas un élément connu ... avec ng test. J'ai essayé toutes les réponses ci-dessus: rien n'a fonctionné.

SOLUTION DE TEST NG:

Angular 2 Karma Test 'nom-composant' n'est pas un élément connu

<= J'ai ajouté des déclarations pour les composants incriminés dans beforEach(.. declarations[])la app.component.spec.ts .

EXEMPLE app.component.spec.ts

...
import { LoginComponent } from './login/login.component';
...
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        ...
      ],
      declarations: [
        AppComponent,
        LoginComponent
      ],
    }).compileComponents();
  ...

J'ai eu le même problème et j'ai résolu en ajoutant le composant (MyComponentToUse) dans le tableau des exportations dans le module où mon composant a été déclaré (ModuleLower). Ensuite, j'importe ModuleLower dans ModuleHigher, donc je peux réutiliser maintenant mon composant (MyComponentToUse) dans ModuleLower et ModuleHigher

            @NgModule({
              declarations: [
                MyComponentToUse
              ],
              exports: [
                MyComponentToUse
              ]
            })
            export class ModuleLower {}


            @NgModule({
              imports: [
                ModuleLower
              ]
            })
            export class ModuleHigher {} 

J'ai eu le même problème avec Angular 7 lorsque je vais affiner le module de test en déclarant le composant de test. Juste ajouté schemas: [ CUSTOM_ELEMENTS_SCHEMA ]comme suit et l'erreur a été résolue.

TestBed.configureTestingModule({
  imports: [ReactiveFormsModule, FormsModule],
  declarations: [AddNewRestaurantComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
});

Pour les problèmes futurs. Si vous pensez avoir suivi toutes les bonnes réponses et pourtant, le problème est là.

Essayez d'éteindre et de rallumer le serveur.

J'ai eu le même problème, j'ai suivi toutes les étapes, je n'ai pas pu le résoudre. Éteignez, rallumez et cela a été corrigé.

Une erreur de débutant générait le même message d'erreur dans mon cas.

La app-rootbalise n'était pas présente dans index.html

OnInita été automatiquement implémenté sur ma classe tout en utilisant la ng new ...phrase clé sur la CLI angulaire pour générer le nouveau composant. Donc, après avoir supprimé l'implémentation et supprimé la méthode vide qui a été générée, le problème est résolu.

Pour moi, le chemin de templateUrl n'était pas correct

J'utilisais

liste-d'achats-edit.component.html

Alors que cela aurait dû être

./shopping-list-edit.component.html

Erreur idiote mais arrive au début. J'espère que cela aide quelqu'un en détresse.

Réponse tardive pour le fil, mais je suis sûr qu'il y a plus de gens qui peuvent utiliser ces informations expliquées dans une autre perspective.

Dans Ionic, les composants angulaires personnalisés sont organisés sous un module séparé appelé ComponentsModule. Lorsque le premier composant est généré en utilisant ionic generate component, avec le composant, ionic génère le ComponentsModule. Tous les composants suivants sont ajoutés au même module, à juste titre.

Voici un échantillon ComponentsModule

import { NgModule } from '@angular/core';
import { CustomAngularComponent } from './custom/custom-angular-component';
import { IonicModule } from 'ionic-angular';
@NgModule({
    declarations: [CustomAngularComponent],
    imports: [IonicModule],
    exports: [CustomAngularComponent],
    entryComponents:[

      ]
})
export class ComponentsModule {}

Pour utiliser le ComponentsModuledans l'application, comme tout autre module angulaire, le ComponentsModulesdoit être importé dans le AppModule. Le composant de génération ionique (v 4.12) n'ajoute pas cette étape, il faut donc l'ajouter manuellement.

Extrait d'AppModule:

@NgModule({
  declarations: [
    //declaration
  ],
  imports: [
    //other modules 
    ComponentsModule,
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    //ionic pages
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    //other providers
  ]
})
export class AppModule {}

Ok, laissez-moi vous donner les détails du code, comment utiliser le composant d'un autre module.

Par exemple, j'ai le module M2, le module M2 a le composant comp23 et le composant comp2, maintenant je veux utiliser comp23 et comp2 dans app.module, voici comment:

c'est app.module.ts, voir mon commentaire,

 // import this module's ALL component, but not other module's component, only this module
  import { AppComponent } from './app.component';
  import { Comp1Component } from './comp1/comp1.component';

  // import all other module,
 import { SwModule } from './sw/sw.module';
 import { Sw1Module } from './sw1/sw1.module';
 import { M2Module } from './m2/m2.module';

   import { CustomerDashboardModule } from './customer-dashboard/customer-dashboard.module';


 @NgModule({

    // declare only this module's all component, not other module component.  

declarations: [
AppComponent,
Comp1Component,


 ],

 // imports all other module only.
imports: [
BrowserModule,
SwModule,
Sw1Module,
M2Module,
CustomerDashboardModule // add the feature module here
],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

c'est le module m2:

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';

   // must import this module's all component file
   import { Comp2Component } from './comp2/comp2.component';
   import { Comp23Component } from './comp23/comp23.component';

   @NgModule({

   // import all other module here.
     imports: [
       CommonModule
     ],

    // declare only this module's child component. 
     declarations: [Comp2Component, Comp23Component],

   // for other module to use these component, must exports
     exports: [Comp2Component, Comp23Component]
   })
   export class M2Module { }

Ma recommandation dans le code explique ce que vous devez faire ici.

maintenant dans app.component.html, vous pouvez utiliser

  <app-comp23></app-comp23>

suivre le module d' importation de l'échantillon angular doc