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

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

Este es el app.component.tsarchivo.

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-componentes un componente angular, verifique que sea parte de este módulo.
2. Si my-componentes un componente web, agregue CUSTOM_ELEMENTS_SCHEMAal @NgModule.schemasde este componente para suprimir este mensaje.

Por favor ayuda.

Tu MyComponentComponentdeberías estar adentro MyComponentModule.

Y en MyComponentModule, debe colocar el MyComponentComponentinterior de las "exportaciones".

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

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

export class MyComponentModule {
}

y colocar el MyComponentModule en el importsin de app.module.tsesta manera (ver 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

¡Salud!

Quizás esto es para el nombre del htmlcomponente de etiqueta

Usas en htmlalgo como esto<mycomponent></mycomponent>

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

¿Lo estás importando a tu app.module.tsgusto y eliminas las 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 MyComponentModuledeberías ser así: -

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

Revise 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']
})

En mi caso, estaba escribiendo pruebas unitarias para un componente que usa subcomponentes, y estaba escribiendo pruebas para asegurarme de que esos subcomponentes estuvieran en la plantilla:

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

No recibí un error, pero una advertencia:

WARN: '' app-entrevista 'no es un elemento conocido:

1. Si 'app-entrevista' es un componente angular, verifique que sea parte de este módulo. WARN: '' app-entrevista 'no es un elemento conocido:
2. Si 'app-entrevista' es un componente angular, verifique que sea parte de este módulo.
3. Si 'app-entrevistas' es un componente web, agregue 'CUSTOM_ELEMENTS_SCHEMA' a '@ NgModule.schemas' de este componente para suprimir este mensaje '.

Además, el subcomponente no se mostró dentro del navegador durante la prueba.

Solía ng g c newcomponentgenerar todos los componentes, por lo que ya estaban declarados en el módulo de aplicación, pero no en el módulo de prueba que para el componente que estaba especificando.

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

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

1. Declarar su MyComponentComponentenMyComponentModule
2. Añade tu MyComponentComponental exportsatributo de MyComponentModule

mycomponentModule.ts

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

export class MyComponentModule {
}

3. Agregue su MyComponentModulea su importsatributo AppModule

app.module.ts

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

Importante Si aún tiene ese error, detenga su servidor ctrl+cdesde la terminal y ejecútelo nuevamenteng serve -o

En mi caso, tenía un componente en un módulo compartido.

El componente se estaba cargando y funcionaba bien, pero el mecanografiado resaltaba la etiqueta html con una línea roja y mostraba este mensaje de error.

Dentro de este componente, noté que no importé un operador rxjs.

import {map} from 'rxjs/operators';

Cuando agregué esta importación, el mensaje de error desapareció.

Verifique todas las importaciones dentro del componente .

Espero que ayude a alguien.

Compruebe en qué módulo se declara el componente principal ...

Si su componente principal está definido en el módulo compartido, también debe hacerlo su módulo secundario.

El componente padre podría declararse en un módulo compartido y no en el módulo lógico basado en la estructura / nomenclatura del directorio de archivos, incluso la CLI angular lo agregó en el módulo incorrecto en mi caso.

Espero que estés teniendo app.module.ts. En su app.module.tscomplemento 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 { }

En su components.module.ts debe importar IonicModule de esta manera:

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

Luego importe IonicModule así:

  imports: [
    CommonModule,
    IonicModule
  ],

entonces sus components.module.ts serán así:

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

No hacerlo export **default** class MyComponentComponent!

Problema relacionado que podría caer bajo el título, si no la pregunta específica:

Accidentalmente hice un ...

export default class MyComponentComponent {

... y eso también arruinó las cosas.

¿Por qué? VS Code agregó la importación a mi módulo cuando lo puse declarations, pero en lugar de ...

import { MyComponentComponent } from '...';

tenía

import MyComponentComponent from '...';

Y eso no se asignó río abajo, supuestamente ya que no fue "realmente" nombrado en ningún lugar con la importación predeterminada.

export class MyComponentComponent {

No se default. Lucro.