2017-06-08 1 views
25

Ich versuche, eine Komponente zu verwenden, die ich im AppModule in anderen Modulen erstellt habe. Ich erhalte die folgenden Fehler aber:Angular 2 'Komponente' ist kein bekanntes Element

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

Meine Projektstruktur ist ganz einfach: Overall project structure

Ich halte meine Seiten im Seiten-Verzeichnis, in dem jede Seite in verschiedenen Modul gehalten wird (zB Kunden-Modul) und Jedes Modul hat mehrere Komponenten (wie Kunden-Liste-Komponente, Kunden-Add-Komponente und so weiter). Ich möchte meine ContactBoxComponent in diesen Komponenten verwenden (zum Beispiel in customers-add-component).

Wie Sie sehen können, habe ich die contacts-box-Komponente innerhalb des Widgets-Verzeichnisses erstellt, so dass sie sich im Wesentlichen im AppModule befindet. Ich habe den ContactBoxComponent-Import zu app.module.ts hinzugefügt und in die Deklarationsliste von AppModule eingefügt. Es funktionierte nicht, also googelte ich mein Problem und fügte ContactBoxComponent hinzu, um die Liste ebenfalls zu exportieren. Hat nicht geholfen. Ich habe auch versucht, ContactBoxComponent in CustomersAddComponent und dann in einem anderen (von anderen Modul) setzen, aber ich habe eine Fehlermeldung, dass es mehrere Deklarationen gibt.

Was fehlt mir?

Antwort

40

Dies sind die 5 Schritte, die ich ausführe, wenn ein solcher Fehler aufgetreten ist.

  • Sind Sie sicher, dass der Name korrekt ist? (Überprüfen Sie auch den in der Komponente definierten Selektor)
  • Deklarieren Sie die Komponente in einem Modul?
  • Wenn es in einem anderen Modul ist, exportieren Sie die Komponente?
  • Wenn es in einem anderen Modul ist, importieren Sie dieses Modul?
  • Neustart des 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.

Sie können keine Komponente zweimal erklären.

+0

Ihre Schritte hat mir nicht helfen, aber vielleicht ist es, weil ich ziemlich neu bin zu Angular 2, so dass ich Ich werde ihnen antworten und vielleicht werden wir die Lösung gemeinsam herausfinden. Ich bin mir sicher, dass der Name korrekt ist, ich habe die Komponente in AppModule deklariert, die Komponente in AppModule exportiert und den CLI neu gestartet. Ich habe auch versucht, AppModule in meine CustomersAddComponent zu importieren, aber es führte zu Fehler: Maximale Call-Stack-Größe überschritten (ich denke, wir importieren AppModule nicht in Angular 2). – Aranha

+2

Sie sollten Ihre Komponente in einem separaten Modul deklarieren und exportieren, nicht in AppModule. Als nächstes sollten Sie dieses neue Modul in jedes Modul importieren, das Sie für Ihre Komponente verwenden möchten. –

+1

Okay, ich verstehe es jetzt. Die einzige Frage ist: Wenn ich das neu erstellte Modul (sagen wir WidgetsModule) importiere, würde es die darin deklarierten Komponenten laden, oder? Das ist ein kleiner Aufwand, aber vielleicht verstehe ich etwas falsch. Ich könnte natürlich ContactsBoxModule erstellen, aber das ist viel wie für eine kleine Komponente. Irgendwelche Hinweise? – Aranha

3

Ich hatte gerade das gleiche Problem. Bevor Sie einige der hier veröffentlichten Lösungen ausprobieren, sollten Sie überprüfen, ob die Komponente wirklich nicht funktioniert. Für mich wurde der Fehler in meiner IDE (WebStorm) angezeigt, aber es stellte sich heraus, dass der Code einwandfrei funktionierte, wenn ich ihn im Browser ausführte.

Nachdem ich das Terminal heruntergefahren habe (das lief ng serve) und started meine IDE, die Nachricht aufgehört zu zeigen.

+0

Das Problem ist idespezifisch. Ich habe das gleiche Problem mit Webstorm. Webstorm wird nicht über Änderungen informiert, die mit angle-cli vorgenommen wurden, daher müssen Sie die IDE neu starten, damit sie neue Komponenten "sieht"! – skiabox

+0

Ich habe das gleiche Problem mit VS-Code, aber mit Ionic 2. Auf einer Seite funktioniert es. In einer Komponente gibt es den Fehler ** ion- * ist kein bekanntes Element **. Ich habe deinen Vorschlag ausprobiert, ** ionic serve ** zu stoppen und die IDE neu gestartet, aber nichts funktioniert. Kennen Sie eine andere Lösung dafür? Übrigens - der Code funktioniert trotzdem. –

Verwandte Themen