then - Si ''<selector>'' es un componente angular, verifique que sea parte de este módulo

ngmodule schemas error

Question

Soy nuevo en Angular2. He intentado crear un componente pero muestra un error.

Este es el archivo app.component.ts .

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'' }

Este es el componente que quiero crear.

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

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

export class MyComponentComponent {

}

Mostrando los dos errores:

1. Si my-component es un componente angular, verifique que sea parte de este módulo.
2. Si my-component es un componente web, agregue CUSTOM_ELEMENTS_SCHEMA a los @NgModule.schemas de este componente para suprimir este mensaje.

Por favor ayuda.

Answer 1

Debe declarar su MyComponentComponent en el mismo módulo de su AppComponent.

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

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

Answer 2

Espero que tengas app.module.ts . En su app.module.ts agregue debajo de la línea

 exports: [myComponentComponent],

Me gusta esto:

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 { }

Answer 3

Su MyComponentComponent debe estar en MyComponentModule .

Y en MyComponentModule , debe colocar MyComponentComponent dentro de las "exportaciones".

Algo como esto, vea el código a continuación.

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

export class MyComponentModule {
}

y coloque MyComponentModule en las imports en app.module.ts esta manera (vea el código a continuación).

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

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

export class AppModule {}

Después de hacerlo, la aplicación puede reconocer el selector de su componente.

Puede obtener más información al respecto aquí: https://angular-2-training-book.rangle.io/handout/modules/feature-modules.html

¡Aclamaciones!

Answer 4

Tal vez esto es para el nombre del componente de etiqueta html

<mycomponent></mycomponent> en html algo como esto <mycomponent></mycomponent>

Debes usar este <app-mycomponent></app-mycomponent>

Answer 5

Verifique su selector en su filename.component.ts

Usando la etiqueta en varios archivos html, diría

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

Debiera ser

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

Ejemplo

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

Answer 6

lo estás importando en tu app.module.ts así y eliminas el bit de directivas: -

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

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

Tu MyComponentModule debería ser así:

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