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

[Bug] Erro no TemplateUrl

Depois de aplicar o que foi mostrado na aula 1 / 5 onde é feito o cabeçalho, aparece a seguinte mensagem de erro no terminal:

osmar@Tag-Ubunto:~/memoteca$ ng serve

Initial Chunk Files | Names         |  Raw Size
polyfills.js        | polyfills     |  82.71 kB | 
main.js             | main          |  23.70 kB | 
styles.css          | styles        |   1.26 kB | 

                    | Initial Total | 107.67 kB

Application bundle generation complete. [4.267 seconds]
Watch mode enabled. Watching for file changes...
  ➜  Local:   http://localhost:4200/
✘ [ERROR] NG8001: 'app-cabecalho' is not a known element:
1. If 'app-cabecalho' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
2. If 'app-cabecalho' 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:9:15:
      9 │   templateUrl: './app.component.html',
        ╵                ~~~~~~~~~~~~~~~~~~~~~~


Application bundle generation failed. [0.306 seconds]
1 resposta
solução!

Olá Osmar, tudo certo?

O erro que você está vendo geralmente ocorre quando o Angular não consegue encontrar o componente que você está tentando usar. Isso pode acontecer por alguns motivos, como:

  1. O componente 'app-cabecalho' não foi declarado corretamente.
  2. O componente 'app-cabecalho' não foi importado corretamente no módulo onde você está tentando usá-lo.

Vamos verificar essas possibilidades:

  1. Verifique se o componente 'app-cabecalho' foi declarado corretamente. Para isso, você deve ter um arquivo cabecalho.component.ts dentro da pasta componentes/cabecalho. Nesse arquivo, você deve ter algo como:
import { Component } from '@angular/core';

@Component({
  selector: 'app-cabecalho',
  templateUrl: './cabecalho.component.html',
  styleUrls: ['./cabecalho.component.css']
})
export class CabecalhoComponent {
  // seu código aqui
}
  1. Verifique se o componente 'app-cabecalho' foi importado corretamente no módulo onde você está tentando usá-lo. Para isso, você deve abrir o arquivo app.module.ts e verificar se o CabecalhoComponent está importado e declarado no array de declarações. Deve ser algo assim:
import { CabecalhoComponent } from './componentes/cabecalho/cabecalho.component';

@NgModule({
  declarations: [
    AppComponent,
    CabecalhoComponent
    // outros componentes aqui
  ],
  // restante do código aqui
})
export class AppModule { }

Se essas verificações não resolverem o problema, pode ser que você tenha esquecido de parar o servidor do Angular e reiniciá-lo após criar o novo componente. Tente parar o servidor (CTRL + C no terminal) e iniciar novamente com o comando ng serve.

Espero ter ajudado!

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

Abraços e bons estudos!