Website-Suche

typescript - Angular 2 'Komponente' ist kein bekanntes Element

Ich versuche, eine von mir erstellte Komponente innerhalb des AppModuls in anderen Modulen zu verwenden. Ich erhalte jedoch folgenden Fehler:

"Ungefangen (im Versprechen): Fehler: Vorlagen-Analysefehler:

'contacts-box' ist kein bekanntes Element:

  1. Wenn 'contacts-box' eine Angular-Komponente ist, überprüfen Sie, ob sie 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 Meldung zu unterdrücken.

Meine Projektstruktur ist ziemlich einfach:

Ich speichere meine Seiten im Seitenverzeichnis, wo jede Seite in einem anderen Modul gespeichert ist (z. B. customers-module) und jedes Modul mehrere Komponenten hat (wie customers-list-component, customers-add-component und so weiter). Ich möchte meine ContactBoxComponent innerhalb dieser Komponenten verwenden (also zum Beispiel innerhalb von customers-add-component).

Wie Sie sehen können, habe ich die contacts-box-Komponente im Verzeichnis widgets erstellt, also befindet sie sich im Grunde im AppModule. Ich habe den Import von ContactBoxComponent in app.module.ts hinzugefügt und ihn in die Deklarationsliste des AppModule gesetzt. Es hat nicht funktioniert, also habe ich mein Problem gegoogelt und ContactBoxComponent auch zur Exportliste hinzugefügt. Hat auch nicht geholfen. Ich habe auch versucht, ContactBoxComponent in CustomersAddComponent und dann in einer anderen (aus einem anderen Modul) zu setzen, aber ich bekam einen Fehler, dass es mehrere Deklarationen gibt.

Was fehlt mir?

Antwort #1

Das sind die 5 Schritte, die ich durchführe, wenn ich einen solchen Fehler bekomme.

  • Bist du sicher, dass der Name korrekt ist? (Überprüfe auch den im Komponent definierten Selektor)
  • Die Komponente in einem Modul deklarieren?
  • Wenn es sich in einem anderen Modul befindet, die Komponente exportieren?
  • Wenn es in einem anderen Modul ist, importiere dieses Modul?
  • Die CLI neu starten?

Wenn der Fehler während des Unit-Tests auftritt, stellen Sie sicher, dass Sie die Komponente deklariert oder das Modul in TestBed.configureTestingModule importiert haben.

Ich habe auch versucht, ContactBoxComponent in CustomersAddComponent und dann in einer anderen (aus einem anderen Modul) zu platzieren, aber ich bekam einen Fehler, 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, in dem Sie Ihre Komponente verwenden möchten.

Es ist schwer zu sagen, wann man ein neues Modul erstellen sollte und wann nicht. Ich erstelle normalerweise für jede Komponente, die ich wiederverwende, ein neues Modul. Wenn ich einige Komponenten habe, die ich fast überall verwende, lege ich sie in ein einziges Modul. Wenn ich eine Komponente habe, die ich nicht wiederverwende, erstelle ich kein separates Modul, bis ich sie irgendwo anders benötige.

Auch wenn es verlockend sein könnte, alle Ihre Komponenten in einem einzigen Modul zu platzieren, 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) ist, desto länger dauert es. Eine kleine Änderung an einem großen Modul dauert länger als eine kleine Änderung an einem kleinen Modul.

BEARBEITEN für v15

Angular 15 führte sogenannte 'Standalone'-Komponenten ein. Diese Komponenten MÜSSEN NICHT in einem Modul deklariert werden.

@Component({
  selector: 'app-hello',
  standalone: true, <------ NOTE THIS
  template: 'hello world',
})
export class StandaloneComponent {}

Verwendung einer eigenständigen Komponente in einer Modulkomponente:

@NgModule({
  imports: [
    CommonModule,
    StandaloneComponent
  ],
  declarations: [ModuleComponent],
  exports: [ModuleComponent],
})
export class ExampleModule {}

Verwendung einer Modulkomponente in einer eigenständigen Komponente:

@Component({
  selector: 'app-hello',
  standalone: true,
  template: 'hello world <module-component></module-component>',
  imports: [ExampleModule]
})
export class StandaloneComponent {}

Antwort #2

Ich hatte ein ähnliches Problem. Es stellte sich heraus, dass ng generate component (mit CLI-Version 7.1.4) eine Deklaration für die Kindkomponente zum AppModule hinzufügt, jedoch nicht zum TestBed-Modul, das es emuliert.

Die Beispiel-App „Tour of Heroes“ enthält eine HeroesComponent mit dem Selektor app-heroes. Die App lief einwandfrei, wenn sie ausgeführt wurde, aber ng test ergab diese Fehlermeldung: 'app-heroes' ist kein bekanntes Element. Das manuelle Hinzufügen der HeroesComponent zu den Deklarationen in configureTestingModule (in app.component.spec.ts) beseitigt 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();
  });
}

Antwort #3

Ich hatte genau dasselbe Problem. Bevor du einige der hier geposteten Lösungen ausprobierst, solltest du vielleicht prüfen, ob die Komponente wirklich nicht funktioniert. Bei mir wurde der Fehler in meiner IDE (WebStorm) angezeigt, aber es stellte sich heraus, dass der Code perfekt funktionierte, als ich ihn im Browser ausgeführt habe.

Nachdem ich das Terminal (das ng serve ausführte) geschlossen und meine IDE neu gestartet habe, tauchte die Meldung nicht mehr auf.

Antwort #4

Viele Antworten/Kommentare erwähnen Komponenten, die in anderen Modulen definiert sind, oder dass man die Komponente (die man in einer anderen Komponente verwenden möchte) in ihrem/deren enthaltenen Modul importieren/deklarieren muss.

Aber im einfachen Fall, in dem Sie die Komponente A aus der Komponente B verwenden möchten, wenn beide im selben Modul definiert sind, müssen Sie beide Komponenten im enthaltenden Modul deklarieren, damit B A sehen kann, und nicht nur A.

Das heißt in my-module.module.ts

import { AComponent } from "./A/A.component";
import { BComponent } from "./B/B.component";

@NgModule({
  declarations: [
    AComponent,   // This is the one that we naturally think of adding ..
    BComponent,   // .. but forget this one and you get a "**'AComponent'** 
                  // is not a known element" error.
  ],
})

Verwandte Artikel