web-dev-qa-db-fra.com

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

L'erreur suivante s'affiche dans la console du navigateur lorsque j'essaie 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 composant PlannerComponent:

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

et le composant HeaderAreaComponent:

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

La balise <header-area>- se trouve dans planner.component.html:

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

    <div class="row">...

Ai-je eu quelque chose de mal?

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-->
angular
105
frot.io

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

Ce que vous ne pouviez pas savoir et qui n'apparaissait pas dans le message d'erreur est le suivant: 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 en tant que @ 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 :)

28
frot.io

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 {}
211
Stephen Paul

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

Dans votre agenda composant, il vous manque l'importation HeaderAreaComponent comme ceci-

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

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

Voyez si cela aide.

6
Sanket

Je faisais face à ce problème sur Angular 7 et le problème était après la création du module, je n'ai pas effectué ng build. Alors j'ai joué -

  • ng build
  • ng serve

et cela a fonctionné.

5
Shailesh Pratapwar

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

Vous devez simplement 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 le message messages flash

4
reza.cse08

L'erreur venant dans le test unitaire, lorsque le composant est sorti de <router-outlet> dans la page principale de l'application. ainsi devrait définir le composant dans le fichier 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();
  }));
});
3
Farzad.Kamali

J'ai rencontré ce problème exact. Echec: 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é.

NG SOLUTION D'ESSAI:

Le nom du composant (Angular 2 Karma Test) n'est pas un élément conn

<= J'ai ajouté des déclarations pour les composants incriminés dans beforEach(.. declarations[]) de 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();
  ...
2
paulsm4

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

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

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

J'ai eu le même problème et j'ai corrigé en ajoutant le composant (MyComponentToUse) dans le tableau exports dans le module où mon composant a été déclaré (ModuleLower). Ensuite, j'importe ModuleLower dans ModuleHigher, pour pouvoir réutiliser maintenant mon composant (MyComponentToUse) dans ModuleLower et ModuleHigher.

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


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

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. Vient d'ajouter schemas: [ CUSTOM_ELEMENTS_SCHEMA ] comme suit et l'erreur a été résolue.

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

Quand j'ai eu ce problème, c'est parce que j'ai utilisé 'templateUrl' au lieu de 'template' dans le décorateur, puisque j'utilise webpack et que je dois utiliser nécessite en elle. Faites attention au nom du décorateur, dans mon cas, j'ai généré le code standard à l'aide d'un extrait, le décorateur a été créé comme suit:

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

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

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

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

vous voulez en savoir plus sur les deux méthodes? lire ce post sur template vs templateUrl

2
Leo Bottaro

J'ai eu cette erreur quand j'avais un incompatibilité de nom de fichier et de classe exportée:

filename: list.component.ts

classe exportée: ListStudentsComponent

Changer de ListStudentsComponent en ListComponent a corrigé mon problème.

2
GonnaGetGet

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 en tant que décorateur de composant pour le 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'y a pas beaucoup d'explications sur la raison pour laquelle il s'agit d'un problème avec angular rc.6

2
Emmanuel Mariki

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

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

0
Felipe Andrade

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 d’allumer le serveur.

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

0
Lena Tevar

OnInit a été implémenté automatiquement dans ma classe lorsque vous utilisiez l'expression-clé ng new ... sur angular CLI pour générer le nouveau composant. Ainsi, après avoir supprimé l'implémentation et la méthode vide générée, le problème est résolu.

0
Auguste

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

J'utilisais

shopping-list-edit.component.html

Considérant qu'il aurait dû être

./shopping-list-edit.component.html

Silly erreur, mais se produit lorsque vous commencez. Espérons que cela aide quelqu'un en détresse.

0
Meena Chaudhary

Réponse tardive pour le fil de discussion, mais je suis sûr que davantage de personnes pouvant utiliser ces informations sont expliquées dans une autre perspective.

Dans Ionic, les composants personnalisés angular sont organisés dans un module distinct appelé ComponentsModule. Lorsque le premier composant est généré à l'aide de ionic generate component, avec le composant, ionic génère la ComponentsModule. Tous les composants suivants sont ajoutés au même module, à juste titre.

Voici un exemple 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 ComponentsModule dans l'application, comme tout autre module angular, le ComponentsModules doit être importé dans le AppModule. ionic Le composant généré (version 4.12) n'ajoute pas cette étape. Il doit donc être ajouté manuellement.

Extrait de 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 {}
0
Aragorn