Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Error NG8001

quero ajuda a resolver isso aqui

PS C:\Angular\livros-angular> ng serve Application bundle generation failed. [7.549 seconds]

X [ERROR] NG8001: 'app-livro-lista' is not a known element:

  1. If 'app-livro-lista' is an Angular component, then verify that it is included in the '@Component.imports' of this component.

  2. If 'app-livro-lista' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message. [plugin angular-compiler]

    src/app/app.component.html:0:0: 0 │ ╵ ^

Error occurs in the template of component AppComponent.

src/app/app.component.ts:8:15:
  8 │   templateUrl: './app.component.html',
    ╵                ~~~~~~~~~~~~~~~~~~~~~~

Watch mode enabled. Watching for file changes...

meus códigos:

livro-lista.component.ts

import { Component, OnInit } from '@angular/core';
import { ControleEditoraService } from '../controle-editora.service';
import { ControleLivrosService } from '../controle-livros.service';
import { Editora } from '../editora';
import { Livro } from '../livro';

@Component({
  selector: 'app-livro-lista',
  templateUrl: './livro-lista.component.html',
  styleUrls: ['./livro-lista.component.css'],
})
export class LivroListaComponent implements OnInit {
  public editoras: Array<Editora> = [];
  public livros: Array<Livro> = [];

  constructor(
    private servEditora: ControleEditoraService,
    private servLivros: ControleLivrosService
  ) {}

  ngOnInit(): void {
    this.editoras = this.servEditora.getEditoras();
    this.livros = this.servLivros.obterLivros();
  }

  excluir = (codigo: number): void => {
    this.servLivros.excluir(codigo);
    this.livros = this.servLivros.obterLivros();
  };

  obterNome = (codEditora: number): string => {
    return this.servEditora.getNomeEditora(codEditora);
  };
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ControleEditoraService } from './controle-editora.service';
import { ControleLivrosService } from './controle-livros.service';
import { LivroListaComponent } from './livro-lista/livro-lista.component';

@NgModule({
    declarations: [
        AppComponent,
        LivroListaComponent
    ],

    imports: [
        BrowserModule
    ],

    providers: [
        ControleEditoraService,
        ControleLivrosService
    ],
    bootstrap: [ AppComponent]
})

export class AppModule { }

app.component.html:

<app-livro-lista></app-livro-lista>
1 resposta
solução!

Oii Filippe, tudo bem?

Pelo erro NG8001 que você está enfrentando, parece que o Angular não está reconhecendo o componente app-livro-lista. Isso geralmente acontece quando o componente não está sendo devidamente declarado ou importado no módulo que o utiliza. No entanto, pelo que você compartilhou do seu código, parece que você já declarou o LivroListaComponent no app.module.ts, o que é ótimo.

Algumas sugestões que você pode tentar para resolver esse problema:

  1. Verificar se há algum erro de digitação ou importação incorreta: Às vezes, um simples erro de digitação ou a falta de salvar os arquivos após as alterações pode causar esse tipo de erro. Certifique-se de que todos os arquivos estão salvos corretamente.

  2. Reiniciar o servidor do Angular: Erros de compilação às vezes podem persistir no cache do servidor de desenvolvimento. Tente parar o servidor (Ctrl+C no terminal onde você rodou ng serve) e iniciar novamente com ng serve.

  3. Verificar a versão do Angular: Tenha certeza de que a versão do Angular que você está usando suporta todas as funcionalidades que você está utilizando. Às vezes, versões mais antigas podem ter problemas com novas funcionalidades.

  4. Limpar o cache do npm: Em alguns casos, limpar o cache do npm pode ajudar a resolver problemas estranhos. Você pode fazer isso com npm cache clean --force e depois reinstalar os pacotes com npm install.

  5. Checar o caminho do template e estilos: Verifica se o caminho para o template HTML e os arquivos CSS estão corretos em livro-lista.component.ts. Erros nesses caminhos podem às vezes causar problemas inesperados.

  6. Revisar as importações no AppModule: Certifique-se de que todas as importações estão corretas e que não há nenhum componente ou serviço faltando que seja necessário para o funcionamento do LivroListaComponent.

Se após essas verificações o problema persistir, por favor compartilhe o seu código completo no github e também coloque o link do curso que você está fazendo, quanto mais informações é melhor para te ajudar.

Um abraço e bons estudos.