Ich versuche, eine Komponente, die ich im AppModule erstellt habe, in anderen Modulen zu verwenden. Ich erhalte jedoch den folgenden Fehler:
"Nicht gefangen (im Versprechen): Fehler: Fehler beim Analysieren der Vorlage:
'Kontaktbox' ist kein bekanntes Element:
- Wenn 'Kontaktbox' eine Winkelkomponente ist, überprüfen Sie, ob sie Teil dieses Moduls ist.
- Wenn 'contactes-box' eine Webkomponente ist, fügen Sie 'CUSTOM_ELEMENTS_SCHEMA' zu '@ NgModule.schemas' dieser Komponente hinzu, um diese Nachricht zu unterdrücken.
Meine Projektstruktur ist ganz einfach:
Ich behalte meine Seiten im Seitenverzeichnis, in dem jede Seite in einem anderen Modul (z. B. Kundenmodul) gespeichert ist und jedes Modul mehrere Komponenten enthält (z. B. Kundenlistenkomponente, Kundenadditionskomponente usw.). Ich möchte meine ContactBoxComponent in diesen Komponenten verwenden (z. B. in der Kunden-Add-Komponente).
Wie Sie sehen können, habe ich die Kontaktbox-Komponente im Widgets-Verzeichnis erstellt, sodass sie sich im Wesentlichen im AppModule befindet. Ich habe den Import von ContactBoxComponent zu app.module.ts hinzugefügt und ihn in die Deklarationsliste von AppModule eingefügt. Es hat nicht funktioniert, also habe ich mein Problem gegoogelt und ContactBoxComponent ebenfalls zur Exportliste hinzugefügt. Hat nicht geholfen. Ich habe auch versucht, ContactBoxComponent in CustomersAddComponent und dann in ein anderes (aus einem anderen Modul) einzufügen, aber es wurde eine Fehlermeldung angezeigt, dass mehrere Deklarationen vorhanden sind.
Was vermisse ich?
Antworten:
Dies sind die 5 Schritte, die ich durchführe, wenn ich einen solchen Fehler bekomme.
Sie können eine Komponente nicht zweimal deklarieren. Sie sollten Ihre Komponente in einem neuen separaten Modul deklarieren und exportieren. Als nächstes sollten Sie dieses neue Modul in jedes Modul importieren, in dem Sie Ihre Komponente verwenden möchten.
Es ist schwer zu sagen, wann Sie ein neues Modul erstellen sollten und wann nicht. Normalerweise erstelle ich für jede wiederverwendete Komponente ein neues Modul. Wenn ich einige Komponenten habe, die ich fast überall verwende, füge ich sie in ein einziges Modul ein. Wenn ich eine Komponente habe, die ich nicht wiederverwenden kann, erstelle ich ein separates Modul, bis ich es woanders benötige.
Obwohl es verlockend sein könnte, alle Komponenten in einem einzigen Modul zusammenzufassen, ist dies schlecht für die Leistung. Während der Entwicklung muss ein Modul jedes Mal neu kompiliert werden, wenn Änderungen vorgenommen werden. Je größer das Modul (mehr Komponenten), desto länger dauert es. Das Vornehmen einer kleinen Änderung am großen Modul dauert länger als das Vornehmen einer kleinen Änderung an einem kleinen Modul.
quelle
Ich hatte ein ähnliches Problem. Es stellte sich heraus, dass
ng generate component
(unter Verwendung der CLI-Version 7.1.4) dem AppModule eine Deklaration für die untergeordnete Komponente hinzugefügt wird, nicht jedoch dem TestBed-Modul, das sie emuliert.Die Beispiel-App "Tour of Heroes" enthält einen
HeroesComponent
With-Selektorapp-heroes
. Die App lief beim Servieren einwandfrei,ng test
erzeugte jedoch die folgende Fehlermeldung :'app-heroes' is not a known element
. DurchHeroesComponent
manuelles Hinzufügen der zu den Deklarationen inconfigureTestingModule
(inapp.component.spec.ts
) wird dieser Fehler behoben.quelle
Ich hatte genau 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 perfekt funktionierte, als ich ihn im Browser ausführte.
Nachdem ich das Terminal heruntergefahren hatte (auf dem ng serve ausgeführt wurde) und meine IDE neu gestartet hatte, wurde die Meldung nicht mehr angezeigt.
quelle
Ich habe die gleiche Problembreite PHP Storm Version 2017.3. Dies behebt es für mich: Intellij Support Forum
Es handelte sich um einen Sprachdienst mit der Breite @angular: https://www.npmjs.com/package/@angular/language-service
quelle
In meinem Fall hatte meine App mehrere Modulebenen, sodass das Modul, das ich importieren wollte, dem übergeordneten Modul hinzugefügt werden musste, das es tatsächlich verwendet hat
pages.module.ts
, anstattapp.module.ts
.quelle
Ich habe das gleiche Problem und es passierte, weil verschiedene Funktionsmodule diese Komponente versehentlich enthalten haben. Wenn es von der anderen Funktion entfernt wurde, hat es funktioniert!
quelle
In meinem Fall fehlte die Komponentendeklaration im Modul, aber auch nach dem Hinzufügen der Deklaration blieb der Fehler bestehen. Ich hatte den Server gestoppt und das gesamte Projekt in VS Code neu erstellt, damit der Fehler behoben wurde.
quelle
Dieser verschlungene Rahmen macht mich verrückt. Da Sie die benutzerdefinierte Komponente in der Vorlage eines anderen Komponententeils des SAME-Moduls definiert haben, müssen Sie keine Exporte im Modul verwenden (z. B. app.module.ts). Sie müssen lediglich die Deklaration in der @ NgModule-Direktive des oben genannten Moduls angeben:
Sie müssen die
JsonInputComponent
(in diesem Beispiel) NICHT inAppComponent
(in diesem Beispiel) importieren , um dieJsonInputComponent
benutzerdefinierte Komponente in derAppComponent
Vorlage zu verwenden. Sie müssen der benutzerdefinierten Komponente lediglich den Modulnamen voranstellen, für den beide Komponenten definiert wurden (z. B. App):Beachten Sie, dass App-JSON-Eingabe nicht JSON-Eingabe ist!
Demo hier: https://github.com/lovefamilychildrenhappiness/AngularCustomComponentValidation
quelle
Ich beginne mit Angular und in meinem Fall bestand das Problem darin, dass ich die Datei nach dem Hinzufügen der Anweisung 'import' nicht gespeichert hatte.
quelle
Routenmodule (sah dies nicht als Antwort)
Überprüfen Sie zunächst: Wenn Sie die Komponente in ihrem Modul deklariert und exportiert haben, importieren Sie das Modul, in das Sie es verwenden möchten, und benennen Sie die Komponente im HTML korrekt.
Andernfalls könnte ein Modul in Ihrem Routing-Modul fehlen:
Wenn Sie ein Routing-Modul mit einer Route haben, die von einem anderen Modul zu einer Komponente weitergeleitet wird, ist es wichtig, dass Sie dieses Modul in dieses Routing-Modul importieren. Andernfalls zeigt die Angular CLI den Fehler an :
component is not a known element
.Beispielsweise
1) Folgende Projektstruktur haben:
2) Innerhalb der haben
todos-routing.module.ts
Sie eine Route zuedit.todo.component.ts
(ohne das Modul zu importieren):Die Route wird gut funktionieren! Beim Importieren der
sidebar.module.ts
Innenseiteedit-todo.module.ts
wird jedoch eine Fehlermeldung angezeigt :app-sidebar is not a known element
.Fix: Da Sie
edit-todo.component.ts
in Schritt 2 eine Route hinzugefügt haben , müssen Sie dieseedit-todo.module.ts
als Import hinzufügen , danach funktioniert die importierte Seitenleisten-Komponente!quelle
Ich stand vor dem gleichen Problem. In meinem Fall habe ich vergessen, die übergeordnete Komponente in der Datei app.module.ts zu deklarieren
Wenn Sie beispielsweise den
<app-datapicker>
Selektor in derToDayComponent
Vorlage verwenden, sollten Sie beideToDayComponent
undDatepickerComponent
in der Datei app.module.ts deklarierenquelle
Angeblich haben Sie eine Komponente:
product-list.component.ts:
Und Sie erhalten diesen Fehler:
app.component.ts:
Stellen Sie sicher, dass Sie die Komponente importieren:
quelle
Diese Frage mag alt und seltsam erscheinen, aber als ich versuchte, ein Modul zu laden (verzögertes Laden) und denselben Fehler erhielt, stellte ich fest, dass mir eine Exportklausel für die Komponente fehlte , die als Teil eines größeren Moduls geliefert wurde.
Dieser Angular.io-Link erklärt, warum : Komponenten / Dienste innerhalb eines Moduls standardmäßig privat (oder geschützt) bleiben. Um sie öffentlich zu machen, müssen Sie sie exportieren.
In meinem Fall (Angular 8) fehlte die Antwort von @Robin Djikof mit dem @ live-love-Codebeispiel :
quelle