Entrar Ainda não tem acesso?
1
resposta

Failed to compile

Referente ao curso Angular: explorando o framework, no capítulo Conhecendo o ambiente e atividade Utilizando o primeiro componente

por Yure_fernandes
| 300 xp | 2 posts

Boa tarde, já duas vezes voltei do 0 e recomecei, mas sempre quando termino a parte de importar o módulo dá erro, mesmo eu seguindo o passo a passo. quando vou na porta 4200 dá erro ou CANNOT GET ou failed to compile

quando dou um ng serve as seguintes mensagens aparecem

rror: src/app/app.component.html:1:1 - error NG8001: 'app-nova' is not a known element:

  1. If 'app-nova' is an Angular component, then verify that it is part of this module.
  2. If 'app-nova' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 


  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

** Angular Live Development Server is listening on localhost:35845, open your browser on http://localhost:35845/

1 resposta
por Leonardo Negrão
| 417.9k xp | 612 posts
Scuba Team

Olá, Yure!

Verifique no arquivo HTML em que você usa o componente nova-transferencia, que a tag HTML que você está usando para ele é app-nova-transferencia.

Quando criamos um componente, você pode reparar no arquivo .component.ts que ele possui uma classe com um decorator. Decorators são intruções adicionais ligadas a uma função ou, como nesse caso, uma classe, que permitem que você faça alguns ajustes.

Esse decorator é o @Component, que basicamente transforma uma classe comum do TypeScript em uma classe especial para componentes. Passamos um objeto como parâmetro para ela, e uma dessas propriedades é o selector.

O selector (em português seletor) define, como o nome diz, o seletor para esse componente, ou seja, a forma como ele será referenciado, mais especificamente, nesse caso, é uma tag HTML (existem outros tipos de seletores, mas não se preocupe com isso agora).

Então você precisa verificar se o seletor definido no seu componente é o mesmo que você está escrevendo no HTML quando usa ele em outro local.

Se o seletor é o mesmo que você está usando no HTML, então você precisa verificar se o problema não é o módulo. Veja o que o erro diz:

If 'app-nova' is an Angular component, then verify that it is part of this module.
# Tradução: Se 'app-nova' é um componente Angular, então verifique que ele é parte deste módulo.

Então, o Angular leu no app.component.html um componente com o seletor <app-nova>, mas ele procurou nos componentes que ele conhece e não encontrou nenhum que possuísse a propriedade selector: 'app-nova'. Como explicado acima, pode ser que o seletor tenha outro nome (como app-nova-transferencia), mas também pode ser que o componente não foi importado corretamente no módulo.

Verifique se o seu app.module.ts está como o seguinte:

@NgModule({
  declarations: [
    AppComponent,
    NovaTransferenciaComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Atenção ao NovaTransferenciaComponent na array de declarations. Isso significa que ele é acessível nesse módulo. Se isso também não for o problema, verifique a importação do componente, se o endereço está correto. Como abaixo:

import { NovaTransferenciaComponent  } from './nova-transferencia/nova-transferencia.component';

Observação: O seu terminal indica que o Angular está rodando na porta 35845, então não estaria na 4200 como no caso do instrutor. Talvez a 4200 já esteja ocupada por outro processo e o Angular procure outra porta livre.

Espero ter ajudado!