Le "composant" d'Angular 2 n'est pas un élément connu.

Question

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

"Uncaught (in promise) : Error : 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' à '@NgModule.schemas' de ce composant pour supprimer ce message.

La structure de mon projet est assez simple :

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

Comme vous pouvez le voir, j'ai créé le composant ContactBox dans le répertoire des widgets, il se trouve donc dans le AppModule. J'ai ajouté l'import ContactBoxComponent à app.module.ts et je l'ai mis dans la liste des déclarations de AppModule. Cela n'a pas fonctionné, alors j'ai cherché mon problème sur Google et j'ai ajouté ContactBoxComponent à la liste des exportations. Cela n'a pas aidé. J'ai aussi essayé de mettre ContactBoxComponent dans CustomersAddComponent et ensuite dans un autre (d'un module différent) mais j'ai eu une erreur disant qu'il y a plusieurs déclarations.

Qu'est-ce que je rate ?

Answer 1

Voici les 5 étapes que je réalise lorsque je reçois une telle erreur.

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

Lorsque l'erreur se produit pendant les tests unitaires, assurez-vous que vous avez déclaré le composant ou importé le module dans le fichier TestBed.configureTestingModule

J'ai également essayé de mettre ContactBoxComponent dans CustomersAddComponent et ensuite dans un autre (d'un module différent) mais j'ai obtenu une erreur disant qu'il y a des déclarations multiples.

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 dans lequel vous souhaitez utiliser votre composant.

Il est difficile de dire quand vous devez créer un nouveau module et quand vous ne devez pas le faire. 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. Quand j'ai un composant que je ne réutilise pas, je ne crée pas de module séparé jusqu'à ce que j'en aie besoin ailleurs.

Bien qu'il puisse être tentant de mettre tous vos composants dans un seul module, cela est mauvais pour les performances. Pendant le développement, un module doit être recompilé à chaque fois que des modifications sont apportées. Plus le module est gros (plus il y a de composants), plus cela prend du temps. Apporter un petit changement à un gros module prend plus de temps que d'apporter un petit changement à un petit module.

Answer 2

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

L'application exemple "Tour of Heroes" contient une HeroesComponent avec sélecteur app-heroes . L'application fonctionne bien lorsqu'elle est servie, mais ng test a produit ce message d'erreur : 'app-heroes' is not a known element . Ajout de la HeroesComponent manuellement aux déclarations dans configureTestingModule (en 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();
  });
}

Answer 3

J'ai eu exactement le même problème. Avant d'essayer certaines des solutions proposées ici, vous pouvez vérifier si le composant vraiment ne fonctionne pas. 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 fermé le terminal (qui exécutait ng serve) et j'ai redémarré mon IDE, le message n'est plus apparu.

Answer 4

J'ai le même problème avec la version 2017.3 de php storm. Ceci le résout pour moi : forum de support intellij

Il s'agissait d'une erreur de largeur du service linguistique @angular : https://www.npmjs.com/package/@angular/language-service

Answer 5

J'ai eu le même problème, et cela s'est produit à cause d'un module de fonctionnalité différent qui a inclus ce composant par erreur. Lorsque je l'ai retiré de l'autre fonctionnalité, cela a fonctionné !