2017-06-08 1 views
25

J'essaie d'utiliser un composant que j'ai créé dans le module AppModule dans d'autres modules. Je reçois l'erreur suivante si:Angular 2 'component' n'est pas un élément connu

"Uncaught (in promise): Error: Template parse errors:

'contacts-box' is not a known element:

  1. If 'contacts-box' is an Angular component, then verify that it is part of this module.
  2. If 'contacts-box' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Ma structure de projet est assez simple: Overall project structure

Je garde mes pages dans le répertoire de pages, où chaque page est maintenue dans les différents modules (par exemple-module clients) et chaque module a plusieurs composants (comme client-list-component, clients-add-component et ainsi de suite). Je veux utiliser mon ContactBoxComponent dans ces composants (donc à l'intérieur de clients-add-component par exemple).

Comme vous pouvez le voir, j'ai créé le composant de boîte de contacts à l'intérieur du répertoire de widgets de sorte qu'il se trouve essentiellement dans l'AppModule. J'ai ajouté l'importation ContactBoxComponent à app.module.ts et l'ai placée dans la liste des déclarations de AppModule. Cela n'a pas fonctionné, j'ai donc googlé mon problème et ajouté ContactBoxComponent à la liste d'exportation. N'a pas aidé. J'ai également essayé de placer ContactBoxComponent dans CustomersAddComponent et ensuite dans un autre (de module différent) mais j'ai eu une erreur disant qu'il y a plusieurs déclarations.

Qu'est-ce qui me manque?

Répondre

40

Voici les 5 étapes que j'effectue lorsque j'ai une telle erreur.

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

I also tried putting ContactBoxComponent in CustomersAddComponent and then in another one (from different module) but I got an error saying there are multiple declarations.

Vous ne pouvez pas déclarer un composant deux fois.

+0

Vos mesures ne m'a pas aidé, mais peut-être parce que je suis assez nouveau pour angulaire 2, donc je ll leur répondra et peut-être nous trouverons la solution ensemble. Je suis sûr que le nom est correct, j'ai déclaré le composant dans AppModule, j'ai exporté le composant dans AppModule et j'ai redémarré le cli. J'ai également essayé d'importer AppModule dans mon CustomersAddComponent mais cela a abouti à Erreur: La taille maximale de la pile d'appels a été dépassée (je suppose que nous n'importons pas AppModule dans Angular 2). – Aranha

+2

Vous devez déclarer et exporter votre composant dans un module sepperate, pas dans AppModule. Ensuite, vous devriez importer ce nouveau module dans everymodule vous wnat pour utiliser votre composant. –

+1

D'accord, je comprends maintenant. La seule question est: quand j'importe le module nouvellement créé (disons WidgetsModule) il chargerait aaaaaall les composants déclarés à l'intérieur, non? C'est un peu frais mais peut-être que je ne comprends pas quelque chose. Je pourrais bien sûr créer ContactsBoxModule mais c'est beaucoup pour un petit composant. Des indices? – Aranha

3

Je viens d'avoir exactement le même problème. Avant d'essayer certaines des solutions postées ici, vous pouvez vérifier si le composant vraiment ne fonctionne pas. Pour moi, l'erreur a été montrée dans mon IDE (WebStorm), mais il s'est avéré que le code fonctionnait parfaitement quand je l'ai lancé dans le navigateur.

Après avoir arrêté le terminal (qui était en cours d'exécution) et a redémarré mon IDE, le message a cessé d'apparaître.

+0

Le problème est spécifique à l'ide. J'ai le même problème avec webstorm. Webstorm n'est pas informé des modifications effectuées avec angular-cli, vous devez donc redémarrer l'EDI pour qu'il «voie» tous les nouveaux composants! – skiabox

+0

J'ai le même problème avec VS Code mais avec Ionic 2. Dans une page cela fonctionne. Dans un composant, il y a l'erreur ** ion- * n'est pas un élément connu **. J'ai essayé votre suggestion pour arrêter ** ionic serve ** et redémarré l'IDE, mais rien ne fonctionne. Connaissez-vous une autre solution pour cela? D'ailleurs - le code fonctionne quand même. –