1
resposta

Erro no cabeçalho

Depois de gerar o componente "cabeçalho" e fazer o html dele, fui adicionar o seletor "app-cabecalho" no app.component.html e gera o seguinte erro:

X [ERROR] TS-992011: The component 'CabecalhoComponent' appears in 'imports', but is not standalone and cannot be imported directly. It must be imported via an NgModule. [plugin angular-compiler]

src/app/app.component.ts:9:26:
  9 │   imports: [RouterOutlet, CabecalhoComponent, CommonModule]
  

Alguém sabe como posso seguir daqui?

1 resposta

Olá Mateus, como vai? Espero que esteja bem!

O erro que você está enfrentando indica que o CabecalhoComponent não pode ser importado diretamente em um módulo (NgModule). Em vez disso, ele precisa ser declarado em um módulo e então você pode importar esse módulo onde deseja usar o componente.

Para resolver esse problema, siga estas etapas:

  1. Certifique-se de que o CabecalhoComponent está devidamente declarado em um módulo. Você deve ter um arquivo cabecalho.module.ts ou similar onde você importa e declara o CabecalhoComponent.

  2. Se você ainda não tem um módulo específico para o CabecalhoComponent, crie um. Por exemplo:

// cabecalho.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CabecalhoComponent } from './caminho/para/o/seu/componente/cabecalho.component';

@NgModule({
  declarations: [CabecalhoComponent],
  imports: [CommonModule],
  exports: [CabecalhoComponent] // Se você planeja usar o cabeçalho em outros módulos, exporte-o
})
export class CabecalhoModule { }
  1. Depois de criar o módulo do cabeçalho, importe-o no módulo principal do seu aplicativo ou no módulo onde você deseja usar o CabecalhoComponent. Supondo que seu módulo principal seja app.module.ts, importe o CabecalhoModule lá:
// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CabecalhoModule } from './caminho/para/o/seu/modulo/cabecalho.module'; // Importe o módulo do cabeçalho
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CabecalhoModule // Adicione o módulo do cabeçalho aos imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  1. Agora, no app.component.html, você pode usar o seletor app-cabecalho sem problemas:
<!-- app.component.html -->
<app-cabecalho></app-cabecalho>

Com esses passos, o erro que você estava enfrentando deve ser resolvido e o CabecalhoComponent deve ser utilizado corretamente em seu aplicativo. Certifique-se de ajustar os caminhos dos arquivos conforme a estrutura do seu projeto.

Espero ter ajudado!

Caso tenha dúvidas, fico à disposição.

Abraços e bons estudos!