web-dev-qa-db-de.com

Angular 2 'component' ist kein bekanntes Element

Ich versuche, eine Komponente, die ich in AppModule erstellt habe, in anderen Modulen zu verwenden. Ich erhalte jedoch den folgenden Fehler:

"Nicht gefunden (in Versprechen): Fehler: Fehler beim Parsen der Vorlage:

'contacts-box' ist kein bekanntes Element:

  1. Wenn 'contacts-box' eine Angular Komponente ist, stellen Sie sicher, dass es Teil dieses Moduls ist.
  2. Wenn 'contacts-box' eine Webkomponente ist, fügen Sie 'CUSTOM_ELEMENTS_SCHEMA' zu den '@ NgModule.schemas' dieser Komponente hinzu, um diese Nachricht zu unterdrücken.

Meine Projektstruktur ist ganz einfach: Overall project structure

Ich führe meine Seiten in einem Seitenverzeichnis, in dem jede Seite in einem anderen Modul (z. B. Kundenmodul) gespeichert ist und jedes Modul mehrere Komponenten enthält (z. B. Kundenlistenkomponente, Kundenzusatzkomponente usw.). Ich möchte meine ContactBoxComponent in diesen Komponenten verwenden (z. B. in der Komponente customers-add).

Wie Sie sehen können, habe ich die Contacts-Box-Komponente im Widgets-Verzeichnis erstellt, sodass sie im Grunde genommen im AppModule enthalten ist. Ich habe den ContactBoxComponent-Import 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 zum Exportieren der Liste hinzugefügt. Hat nicht geholfen. Ich habe auch versucht, ContactBoxComponent in CustomersAddComponent und dann in einem anderen (aus einem anderen Modul) zu platzieren, habe jedoch die Fehlermeldung erhalten, dass es mehrere Deklarationen gibt.

Was vermisse ich?

86
Aranha

Dies sind die 5 Schritte, die ich durchführe, wenn ich einen solchen Fehler erhalte.

  • 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 sich in einem anderen Modul befindet, exportieren Sie die Komponente?
  • Wenn es sich in einem anderen Modul befindet, importieren Sie dieses Modul?
  • Cli neu starten?

Ich habe auch versucht, ContactBoxComponent in CustomersAddComponent und dann in einem anderen (aus einem anderen Modul) zu platzieren, habe jedoch die Fehlermeldung erhalten, dass es mehrere Deklarationen gibt.

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, das Sie für 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 Komponente, die ich wieder verwende, ein neues Modul. Wenn ich einige Komponenten habe, die ich fast überall verwende, setze ich sie in ein einzelnes Modul. Wenn ich eine Komponente habe, die ich nicht wiederverwende, erst dann ein separates Modul erstellen, wenn ich sie woanders benötige.

Obwohl es möglicherweise verlockend ist, alle Ihre Komponenten in einem einzigen Modul unterzubringen, wirkt sich dies negativ auf die Leistung aus. 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 an einem großen Modul dauert länger als das Vornehmen einer kleinen Änderung an einem kleinen Modul.

195
Robin Dijkhof

Ich hatte genau das gleiche Problem. Bevor Sie einige der hier aufgeführten Lösungen ausprobieren, sollten Sie überprüfen, ob die Komponente wirklich nicht funktioniert. Für mich wurde der Fehler in meinem 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 habe (auf dem ng serve ausgeführt wurde) nd meine IDE neu gestartet haben, wurde die Meldung nicht mehr angezeigt.

13
harryvederci

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 hinzufügt, jedoch nicht dem TestBed-Modul, das sie emuliert.

Die Beispiel-App "Tour of Heroes" enthält eine HeroesComponent mit Auswahl app-heroes. Die App lief beim Servieren einwandfrei, aber ng test erzeugte diese Fehlermeldung: 'app-heroes' is not a known element. Das manuelle Hinzufügen von HeroesComponent zu den Deklarationen in configureTestingModule (in app.component.spec.ts) behebt diesen Fehler.

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

Ich habe die gleiche ausgabebreite php storm version 2017.3. Dies behebt es für mich: intellij support forum

Es handelte sich um einen @angular-Sprachdienst der Fehlerbreite: https://www.npmjs.com/package/@angular/language-service

3
milan

In meinem Fall fehlte die Komponentendeklaration im Modul, aber selbst 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 verschwindet.

0
Eternal21

In meinem Fall hatte meine App mehrere Ebenen von Modulen, sodass das Modul, das ich importieren wollte, in das übergeordnete Modul eingefügt werden musste, das es tatsächlich verwendet hat pages.module.ts anstelle von app.module.ts.

0
Kof

Ich habe das gleiche Problem, und es geschah, weil versehentlich ein anderes Funktionsmodul diese Komponente enthielt. Wenn es von der anderen Funktion entfernt wurde, hat es funktioniert!

0
Vladimir Mitic