web-dev-qa-db-fra.com

Angular 2 'composant' n'est pas un élément connu

J'essaie d'utiliser un composant que j'ai créé à l'intérieur de l'AppModule dans d'autres modules. J'obtiens cependant l'erreur suivante:

"Non capturé (promis): Erreur: Erreurs d'analyse du modèle:

'contacts-box' n'est pas un élément connu:

  1. Si 'contacts-box' est un composant Angular, vérifiez qu'il fait partie de ce module.
  2. Si "contacts-box" est un composant Web, ajoutez "CUSTOM_ELEMENTS_SCHEMA" au "@ NgModule.schemas" de ce composant pour supprimer ce message.

La structure de mon projet est assez simple: Overall project structure

Je garde mes pages dans le répertoire des pages, où chaque page est conservée dans un module différent (par exemple, module-clients) et chaque module a plusieurs composants (comme clients-list-composant, clients-add-composant, etc.). Je veux utiliser mon ContactBoxComponent à l'intérieur de ces composants (donc à l'intérieur de clients-add-composant par exemple).

Comme vous pouvez le constater, j'ai créé le composant Contacts-box dans le répertoire des widgets, de sorte qu'il se trouve essentiellement dans l'AppModule. J'ai ajouté l'importation ContactBoxComponent à app.module.ts et je l'ai mis dans la liste des déclarations d'AppModule. Cela n'a pas fonctionné, alors j'ai cherché mon problème dans Google et ajouté ContactBoxComponent à la liste des exportations. N'a pas aidé. J'ai également essayé de mettre ContactBoxComponent dans CustomersAddComponent, puis dans un autre (à partir d'un module différent), mais j'ai reçu une erreur disant qu'il y avait plusieurs déclarations.

Qu'est-ce que je rate?

angulartypescriptangular-componentsangular-module
86
Aranha

Ce sont les 5 étapes que j'effectue quand j'ai une telle erreur.

  • Êtes-vous sûr que le nom est correct? (cochez également le sélecteur défini dans le composant)
  • Déclarer le composant dans un module?
  • S'il se trouve dans un autre module, exportez le composant?
  • Si c'est dans un autre module, importez ce module?
  • Redémarrer la cli?

J'ai également essayé de mettre ContactBoxComponent dans CustomersAddComponent, puis dans un autre (à partir d'un module différent), mais j'ai reçu une erreur disant qu'il y avait plusieurs déclarations.

Vous ne pouvez pas déclarer un composant deux fois. Vous devez déclarer et exporter votre composant dans un nouveau module séparé. Ensuite, vous devez importer ce nouveau module dans chaque module pour lequel vous souhaitez utiliser votre composant.

Il est difficile de dire quand vous devez créer un nouveau module et quand vous ne devriez pas. Je crée généralement un nouveau module pour chaque composant que je réutilise. Lorsque j'ai des composants que j'utilise presque partout, je les mets dans un seul module. Lorsque j'ai un composant que je ne réutilise pas, je ne crée pas de module séparé tant que je n'en ai pas besoin ailleurs.

Bien que cela puisse être tentant de mettre tous vos composants dans un seul module, ceci est mauvais pour les performances. Lors du développement, un module doit être recompilé chaque fois que des modifications sont apportées. Plus le module est grand (plus de composants), plus il prend de temps. Effectuer un petit changement en gros module prend plus de temps que de faire un petit changement en petit module.

195
Robin Dijkhof

Je viens d'avoir exactement le même problème. Avant d’essayer certaines des solutions publiées ici, vous voudrez peut-être vérifier si le composant ne fonctionne pas vraiment . Pour moi, l'erreur était affichée dans mon IDE (WebStorm), mais il s'est avéré que le code fonctionnait parfaitement lorsque je l'ai exécuté dans le navigateur.

Après avoir arrêté le terminal (qui exécutait ng serve) et redémarré mon IDE, le message a cessé de s'afficher.

13
harryvederci

J'ai eu un problème similaire. Il s'est avéré que ng generate component (à l'aide de la version 7.1.4 de la CLI) ajoute une déclaration pour le composant enfant à AppModule, mais pas au module TestBed qui l'émule.

L'exemple d'application "Tour of Heroes" contient une HeroesComponent avec le sélecteur app-heroes. L'application a fonctionné correctement lorsqu'elle a été servie, mais ng test a généré le message d'erreur suivant: 'app-heroes' is not a known element. L'ajout manuel de HeroesComponent aux déclarations dans configureTestingModule (dans app.component.spec.ts) élimine cette erreur.

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        HeroesComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });
}
12
Jan Hettich

J'ai le même problème de largeur php storm version 2017.3. Cela corrige cela pour moi: forum de support intellij

C'était une erreur width @angular language service: https://www.npmjs.com/package/@angular/language-service

3
milan

Le problème dans mon cas était l'absence de déclaration de composant dans le module, mais même après l'ajout de la déclaration, l'erreur persistait. J'avais arrêté le serveur et reconstruit le projet entier en VS Code pour que l'erreur disparaisse.

0
Eternal21

Dans mon cas, mon application comportait plusieurs couches de modules. Le module que j'essayais d'importer devait donc être ajouté au module parent qui l'utilisait réellement pages.module.ts, au lieu de app.module.ts.

0
Kof

J'ai eu le même problème, et cela se passait à cause de différents modules de fonctionnalités inclus ce composant par erreur. Lorsque retiré de l'autre fonctionnalité, cela a fonctionné!

0
Vladimir Mitic