Wenn '<Selektor>' eine Winkelkomponente ist, überprüfen Sie, ob sie Teil dieses Moduls ist

Ich bin neu in Angular2. Ich habe versucht, eine Komponente zu erstellen, aber einen Fehler angezeigt.

Dies ist die app.component.tsDatei.

import { Component } from '@angular/core';
import { MyComponentComponent } from './my-component.component';

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{name}}</h1>
    <h4>Something</h4>
    <my-component></my-component>
  `,
  directives: [MyComponentComponent]
})
export class AppComponent { name = 'Sam' }

Dies ist die Komponente, die ich erstellen möchte.

import { Component } from '@angular/core';

@Component({
selector: 'my-component',
template: `
    <p>This is my article</p>
`
})

export class MyComponentComponent {

}

Anzeigen der beiden Fehler:

1. Wenn my-componentes sich um eine Winkelkomponente handelt, überprüfen Sie, ob sie Teil dieses Moduls ist.
2. Wenn my-componentes sich um eine Webkomponente handelt, fügen Sie diese CUSTOM_ELEMENTS_SCHEMAzu @NgModule.schemasdieser Komponente hinzu, um diese Nachricht zu unterdrücken.

Bitte helfen Sie.

Du MyComponentComponentsolltest dabei sein MyComponentModule.

Und in MyComponentModulesollten Sie das MyComponentComponentInnere der "Exporte" platzieren.

So etwas siehe Code unten.

@NgModule({
   imports: [],
   exports: [MyComponentComponent],
   declarations: [MyComponentComponent],
   providers: [],
})

export class MyComponentModule {
}

und platzieren Sie das MyComponentModulein das importsin app.module.tswie folgt (siehe Code unten).

import { MyComponentModule } from 'your/file/path';

@NgModule({
   imports: [MyComponentModule]
   declarations: [AppComponent],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule {}

Danach kann der Selektor Ihrer Komponente von der App erkannt werden.

Weitere Informationen hierzu finden Sie hier: https://angular-2-training-book.rangle.io/handout/modules/feature-modules.html

Prost!

Möglicherweise ist dies der Name der htmlTag-Komponente

Sie verwenden in so htmletwas<mycomponent></mycomponent>

Sie müssen dies verwenden <app-mycomponent></app-mycomponent>

Importieren Sie es app.module.tsso und entfernen Sie das Direktiven-Bit: -

@NgModule({
    bootstrap: [AppComponent],
    imports: [MyComponentModule],// or whatever the name of the module is that declares your component.

    declarations: [AppComponent],
    providers: []
})
export class AppModule {}

Ihr MyComponentModulesollte so sein: -

@NgModule({
    imports: [],
    exports: [MyComponentComponent],
    declarations: [MyComponentComponent],
    providers: [],
})
export class MyComponentModule {
}

Überprüfen Sie Ihren Selektor in Ihrem Dateinamen.component.ts

Mit dem Tag in verschiedenen HTML-Dateien würde ich sagen

<my-first-component></my-first-component>

Sollte sein

<app-my-first-component></app-my-first-component>

Beispiel

@Component({
  selector: 'app-my-first-component',
  templateUrl: './my-first-component.component.html',
  styleUrls: ['./my-first-component.component.scss']
})

In meinem Fall habe ich Komponententests für eine Komponente geschrieben, die Unterkomponenten verwendet, und ich habe Tests geschrieben, um sicherzustellen, dass diese Unterkomponenten in der Vorlage enthalten sind:

it('should include the interview selection subview', () => {
    expect(fixture.debugElement.query(By.css('app-interview')))
    .toBeTruthy()  
  }); 

Ich habe keinen Fehler bekommen, aber eine Warnung:

WARNUNG: '' App-Interview '' ist kein bekanntes Element:

1. Wenn 'App-Interview' eine Angular-Komponente ist, überprüfen Sie, ob es Teil dieses Moduls ist. WARNUNG: '' App-Interview '' ist kein bekanntes Element:
2. Wenn 'App-Interview' eine Angular-Komponente ist, überprüfen Sie, ob es Teil dieses Moduls ist.
3. Wenn 'app-interview' eine Webkomponente ist, fügen Sie 'CUSTOM_ELEMENTS_SCHEMA' zu den '@ NgModule.schemas' dieser Komponente hinzu, um diese Nachricht zu unterdrücken. '

Außerdem wurde die Unterkomponente während des Tests nicht im Browser angezeigt.

Früher habe ich ng g c newcomponentalle Komponenten generiert, daher wurden sie bereits im App- Modul deklariert, nicht jedoch das Testmodul, das für die von mir angegebene Komponente angegeben wurde.

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ EditorComponent,
        InterviewComponent]
    })
    .compileComponents();
  }));

Sie müssen Ihre MyComponentComponent im selben Modul Ihrer AppComponent deklarieren.

import { AppComponent } from '...';
import { MyComponentComponent } from '...';

@NgModule({
   declarations: [ AppComponent, MyComponentComponent ],
   bootstrap: [ AppComponent ]
})
export class AppModule {}

1. Erklären Sie Ihre MyComponentComponentinMyComponentModule
2. Fügen Sie Ihre MyComponentComponentzu exportsAttribut MyComponentModule

mycomponentModule.ts

@NgModule({
   imports: [],
   exports: [MyComponentComponent],
   declarations: [MyComponentComponent],
   providers: [],
})

export class MyComponentModule {
}

3. Fügen Sie Ihr MyComponentModulezu Ihrem AppModule- importsAttribut hinzu

app.module.ts

    @NgModule({
       imports: [MyComponentModule]
       declarations: [AppComponent],
       providers: [],
       bootstrap: [AppComponent]
    })
    export class AppModule {} 

Wichtig Wenn dieser Fehler weiterhin auftritt, stoppen Sie den Server ctrl+cvom Terminal und führen Sie ihn erneut ausng serve -o

In meinem Fall hatte ich eine Komponente in einem Shared-Modul.

Die Komponente wurde geladen und funktionierte gut, aber Typoskript hob das HTML-Tag mit roter Linie hervor und zeigte diese Fehlermeldung an.

In dieser Komponente ist mir aufgefallen, dass ich keinen rxjs-Operator importiert habe.

import {map} from 'rxjs/operators';

Als ich diesen Import hinzufügte, verschwand die Fehlermeldung.

Überprüfen Sie alle Importe innerhalb der Komponente .

Hoffe es hilft jemandem.

Überprüfen Sie, in welchem ​​Modul die übergeordnete Komponente deklariert wird ...

Wenn Ihre übergeordnete Komponente im freigegebenen Modul definiert ist, muss dies auch Ihr untergeordnetes Modul sein.

Die übergeordnete Komponente könnte in einem gemeinsam genutzten Modul deklariert werden und nicht in dem Modul, das basierend auf der Dateiverzeichnisstruktur / -benennung logisch ist. In meinem Fall hat sogar die Angular-CLI sie dem falschen Modul hinzugefügt.

Hoffe du hast app.module.ts. In Ihrer app.module.tsunten stehenden Zeile hinzufügen-

 exports: [myComponentComponent],

So was:

import { NgModule, Renderer } from '@angular/core';
import { HeaderComponent } from './headerComponent/header.component';
import { HeaderMainComponent } from './component';
import { RouterModule } from '@angular/router';

@NgModule({
    declarations: [
        HeaderMainComponent,
        HeaderComponent
    ],
    imports: [
        RouterModule,
    ],
    providers: [],
    bootstrap: [HeaderMainComponent],
    exports: [HeaderComponent],
})
export class HeaderModule { }

In Ihren components.module.ts sollten Sie IonicModule wie folgt importieren:

import { IonicModule } from '@ionic/angular';

Importieren Sie dann IonicModule wie folgt:

  imports: [
    CommonModule,
    IonicModule
  ],

Ihre Komponenten.module.ts werden also so aussehen:

import { CommonModule } from '@angular/common';
import {PostComponent} from './post/post.component'
import { IonicModule } from '@ionic/angular';

@NgModule({
  declarations: [PostComponent],
  imports: [
    CommonModule,
    IonicModule
  ],
  exports: [PostComponent]
})
export class ComponentsModule { }```

Nicht export **default** class MyComponentComponent!

Verwandte Ausgabe, die unter den Titel fallen könnte, wenn nicht die spezifische Frage:

Ich habe versehentlich eine ...

export default class MyComponentComponent {

... und das hat auch alles vermasselt.

Warum? VS Code hat den Import zu meinem Modul hinzugefügt, als ich ihn eingefügt habe declarations, aber anstatt ...

import { MyComponentComponent } from '...';

es hatte

import MyComponentComponent from '...';

Und das wurde nicht stromabwärts zugeordnet, vermutlich weil es mit dem Standardimport nirgendwo "wirklich" benannt wurde.

export class MyComponentComponent {

Nein default. Profitieren.