Se '<selector>' for um componente Angular, verifique se ele faz parte deste módulo

Eu sou novo no Angular2. Eu tentei criar um componente, mas mostrando um erro.

Este é o app.component.tsarquivo

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 é o componente que eu quero criar.

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

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

export class MyComponentComponent {

}

Mostrando os dois erros:

1. Se my-componentfor um componente Angular, verifique se ele faz parte deste módulo.
2. Se my-componentfor um componente da Web, adicione CUSTOM_ELEMENTS_SCHEMAao @NgModule.schemasdeste componente para suprimir esta mensagem.

Por favor ajude.

Seu MyComponentComponentdeve estar em MyComponentModule.

E dentro MyComponentModule, você deve colocar o MyComponentComponentinterior das "exportações".

Algo assim, veja o código abaixo.

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

export class MyComponentModule {
}

e coloque o MyComponentModuleno importsem app.module.tscomo este (ver código abaixo).

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

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

export class AppModule {}

Depois disso, o seletor do seu componente agora pode ser reconhecido pelo aplicativo.

Você pode aprender mais sobre isso aqui: https://angular-2-training-book.rangle.io/handout/modules/feature-modules.html

Felicidades!

Talvez seja para o nome do htmlcomponente da tag

Você usa em htmlalgo assim<mycomponent></mycomponent>

Você deve usar isso <app-mycomponent></app-mycomponent>

você está importando da mesma app.module.tsmaneira e remova o bit de diretivas: -

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

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

Você MyComponentModuledeve ser assim: -

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

Verifique seu seletor em seu filename.component.ts

Usando a tag em vários arquivos html, eu diria

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

Deveria estar

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

Exemplo

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

No meu caso, eu escrevia testes de unidade para um componente que usa subcomponentes e escrevia testes para garantir que esses subcomponentes estivessem no modelo:

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

Não recebi um erro, mas um aviso:

AVISO: '' app-entrevista 'não é um elemento conhecido:

1. Se 'app-entrevista' for um componente Angular, verifique se ele faz parte deste módulo. AVISO: '' app-entrevista 'não é um elemento conhecido:
2. Se 'app-entrevista' for um componente Angular, verifique se ele faz parte deste módulo.
3. Se 'app-entrevista' for um componente da Web, adicione 'CUSTOM_ELEMENTS_SCHEMA' ao '@ NgModule.schemas' deste componente para suprimir esta mensagem. '

Além disso, o subcomponente não apareceu dentro do navegador durante o teste.

Eu costumava ng g c newcomponentgerar todos os componentes, então eles já foram declarados no módulo de aplicativo, mas não no módulo de teste que estava especificando para o componente.

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

Você deve declarar seu MyComponentComponent no mesmo módulo do seu AppComponent.

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

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

1. Declare seu MyComponentComponentemMyComponentModule
2. Adicione o seu MyComponentComponentao exportsatributo de MyComponentModule

mycomponentModule.ts

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

export class MyComponentModule {
}

3. Adicione seu MyComponentModuleao seu importsatributo AppModule

app.module.ts

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

Importante Se você ainda tiver esse erro, pare o servidor ctrl+cdo terminal e execute-o novamenteng serve -o

No meu caso, eu tinha um componente em um módulo compartilhado.

O componente estava carregando e funcionou bem, mas o texto datilografado destacava a tag html com linha vermelha e mostrava essa mensagem de erro.

Dentro deste componente, notei que não importava um operador rxjs.

import {map} from 'rxjs/operators';

Quando adicionei essa importação, a mensagem de erro desapareceu.

Verifique todas as importações dentro do componente .

Espero que ajude alguém.

Verifique em qual módulo o componente pai está sendo declarado em ...

Se o seu componente pai estiver definido no módulo compartilhado, seu módulo filho também deve.

O componente pai pode ser declarado em um módulo compartilhado e não no módulo que é lógico com base na estrutura / nomeação do diretório de arquivos, mesmo a CLI Angular o adicionou ao módulo errado no meu caso.

Espero que você esteja tendo app.module.ts. No seu app.module.tsadd abaixo da linha

 exports: [myComponentComponent],

Como isso:

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

No seu components.module.ts, você deve importar o IonicModule assim:

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

Importe o IonicModule assim:

  imports: [
    CommonModule,
    IonicModule
  ],

para que seu components.module.ts fique assim:

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

Não export **default** class MyComponentComponent!

Problema relacionado que pode se enquadrar no título, se não a pergunta específica:

Eu acidentalmente fiz um ...

export default class MyComponentComponent {

... e isso estragou tudo também.

Por quê? O VS Code adicionou a importação ao meu módulo quando eu o coloquei declarations, mas em vez de ...

import { MyComponentComponent } from '...';

teve

import MyComponentComponent from '...';

E isso não foi mapeado rio abaixo, supostamente porque não foi "realmente" nomeado em nenhum lugar com a importação padrão.

export class MyComponentComponent {

Não default. Lucro.