typescript - Se ''<selector>'' for um componente Angular, então verifique se ele faz parte deste módulo

Eu sou novo em Angular2. Eu tentei criar um componente, mas está mostrando um erro.

Este é o arquivo 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 é 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:

Se my-component é um componente Angular, verifique então se ele faz parte deste módulo.
Se my-component for um Web Component, adicione CUSTOM_ELEMENTS_SCHEMA ao @NgModule.schemas deste componente para suprimir esta mensagem.

Por favor, ajude.

Resposta #1

Seu MyComponentComponent deve estar em MyComponentModule.

E em MyComponentModule, você deve colocar o MyComponentComponent dentro de "exports".

Algo assim, veja o código abaixo.

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

export class MyComponentModule {
}

e coloque o MyComponentModule em imports em app.module.ts assim (veja o código abaixo).

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

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

export class AppModule {}

Depois de fazer isso, 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

Resposta #2

Talvez isso seja para o nome do componente de tag html

Você usa em html algo assim <mycomponent></mycomponent>

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

Resposta #3

você está importando isso no seu app.module.ts assim e removendo a parte das diretivas:-

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

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

Seu MyComponentModule deve ser assim:-

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

Resposta #4

No meu caso, eu estava escrevendo testes de unidade para um componente que usa subcomponentes, e eu estava escrevendo testes para garantir que esses subcomponentes estavam no template:

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

Eu não recebi um erro, mas um aviso:

AVISO: ''app-interview'' não é um elemento conhecido:
Se 'app-interview' é um componente Angular, então verifique se ele faz parte deste módulo. AVISO: ''app-interview'' não é um elemento conhecido:
Se 'app-interview' for um componente Angular, então verifique se ele faz parte deste módulo.
Se 'app-interview' for um Componente Web, adicione 'CUSTOM_ELEMENTS_SCHEMA' aos '@NgModule.schemas' deste componente para suprimir esta mensagem.

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

Eu usei ng g c newcomponent para gerar todos os componentes, então eles já estavam declarados no appmodule, mas não no módulo de teste para o componente que eu estava especificando.

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

Resposta #5

Verifique seu seletor em seu filename.component.ts

Usando a tag em vários arquivos HTML eu diria

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

Deve ser

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

Exemplo