Pesquisa de site

typescript - Angular 2 'component' não é um elemento conhecido

Estou tentando usar um componente que criei dentro do AppModule em outros módulos. No entanto, recebo o seguinte erro:

"Não capturado (na promessa): Erro: Erros de análise do template:

'contacts-box' não é um elemento conhecido:

  1. Se 'contacts-box' for um componente Angular, então verifique se ele faz parte deste módulo.
  2. Se 'contacts-box' for um Componente Web, adicione 'CUSTOM_ELEMENTS_SCHEMA' ao '@NgModule.schemas' deste componente para suprimir esta mensagem.

A estrutura do meu projeto é bastante simples:

Eu mantenho minhas páginas no diretório de páginas, onde cada página é mantida em um módulo diferente (por exemplo, customers-module) e cada módulo tem múltiplos componentes (como customers-list-component, customers-add-component e assim por diante). Eu quero usar meu ContactBoxComponent dentro desses componentes (então dentro do customers-add-component, por exemplo).

Como você pode ver, eu criei o componente contacts-box dentro do diretório widgets, então ele está basicamente dentro do AppModule. Eu adicionei a importação do ContactBoxComponent no app.module.ts e coloquei na lista de declarações do AppModule. Não funcionou, então pesquisei meu problema no Google e adicionei o ContactBoxComponent também na lista de exportações. Não ajudou. Eu também tentei colocar o ContactBoxComponent no CustomersAddComponent e depois em outro (de outro módulo), mas recebi um erro dizendo que há múltiplas declarações.

O que estou perdendo?

Resposta #1

Estes são os 5 passos que eu realizo quando recebo tal erro.

  • Você tem certeza de que o nome está correto? (Também verifique o seletor definido no componente)
  • Declarar o componente em um módulo?
  • Se estiver em outro módulo, exporte o componente?
  • Se estiver em outro módulo, importe esse módulo?
  • Reiniciar o CLI?

Quando o erro ocorrer durante os testes unitários, certifique-se de que você declarou o componente ou importou o módulo em TestBed.configureTestingModule

Também tentei colocar o ContactBoxComponent no CustomersAddComponent e depois em outro (de um módulo diferente), mas recebi um erro dizendo que existem múltiplas declarações.

Você não pode declarar um componente duas vezes. Você deve declarar e exportar seu componente em um novo módulo separado. Em seguida, você deve importar este novo módulo em cada módulo onde quiser usar seu componente.

É difícil dizer quando você deve criar um novo módulo e quando não deve. Eu geralmente crio um novo módulo para cada componente que reutilizo. Quando tenho alguns componentes que uso quase em todos os lugares, coloco-os em um único módulo. Quando tenho um componente que não reutilizo, não criarei um módulo separado até precisar dele em outro lugar.

Embora possa ser tentador colocar todos os seus componentes em um único módulo, isso é ruim para o desempenho. Durante o desenvolvimento, um módulo precisa ser recompilado toda vez que mudanças são feitas. Quanto maior o módulo (mais componentes), mais tempo leva. Fazer uma pequena mudança em um módulo grande leva mais tempo do que fazer uma pequena mudança em um módulo pequeno.

EDIT para v15

O Angular 15 introduziu os chamados componentes 'Standalone'. Esses componentes NÃO precisam ser declarados em um módulo.

@Component({
  selector: 'app-hello',
  standalone: true, <------ NOTE THIS
  template: 'hello world',
})
export class StandaloneComponent {}

Usando um componente independente em um componente de módulo:

@NgModule({
  imports: [
    CommonModule,
    StandaloneComponent
  ],
  declarations: [ModuleComponent],
  exports: [ModuleComponent],
})
export class ExampleModule {}

Usando um componente de módulo em um componente independente:

@Component({
  selector: 'app-hello',
  standalone: true,
  template: 'hello world <module-component></module-component>',
  imports: [ExampleModule]
})
export class StandaloneComponent {}

Resposta #2

Eu tive um problema semelhante. Aconteceu que ng generate component (usando a versão 7.1.4 do CLI) adiciona uma declaração para o componente filho no AppModule, mas não no módulo TestBed que o emula.

O aplicativo de exemplo "Tour of Heroes" contém um HeroesComponent com o seletor app-heroes. O aplicativo funcionava bem quando executado, mas ng test produziu esta mensagem de erro: 'app-heroes' não é um elemento conhecido. Adicionar o HeroesComponent manualmente às declarações em configureTestingModule (em app.component.spec.ts) elimina esse erro.

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        HeroesComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });
}

Resposta #3

Eu acabei de ter exatamente o mesmo problema. Antes de tentar algumas das soluções postadas aqui, você pode querer verificar se o componente realmente não funciona. Para mim, o erro foi mostrado no meu IDE (WebStorm), mas acabou que o código funcionava perfeitamente quando eu o executei no navegador.

Depois que eu fechei o terminal (que estava rodando ng serve) e reiniciei meu IDE, a mensagem parou de aparecer.

Resposta #4

Muitas respostas/comentários mencionam componentes definidos em outros módulos, ou que você precisa importar/declarar o componente (que você quer usar em outro componente) em seu/seus módulo(s) contenedor(es).

Mas no caso simples em que você quer usar o componente A a partir do componente B quando ambos estão definidos no mesmo módulo, você precisa declarar ambos os componentes no módulo contêiner para que B veja A, e não apenas A.

Ou seja, em my-module.module.ts

import { AComponent } from "./A/A.component";
import { BComponent } from "./B/B.component";

@NgModule({
  declarations: [
    AComponent,   // This is the one that we naturally think of adding ..
    BComponent,   // .. but forget this one and you get a "**'AComponent'** 
                  // is not a known element" error.
  ],
})

Artigos relacionados