Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
20
respostas

Novos erros

Boa noite, apareceu esse novo erro:

<nova-transferencia (aoTransferir)="transferir($event)">

  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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

O código:

<nova-transferencia (aoTransferir)="transferir($event)">

Olá Mariana, tudo bem?

Para que eu consiga te orientar melhor, você pode anexar aqui uma imagem do erro que aparece no seu navegador?

Ajudaria também acrescentar o código completo dos seus arquivos app.component.html e app.component.ts.

Aguardo, abraços!

Olá, esse erro já foi sanado. Estou com outro que aparece no navegador. Poderia verificar?

Olá Mariana, posso sim, estou à disposição.

Fique à vontade para inserir a dúvida aqui ou criar outro tópico caso prefira.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Mariana, vou analisar o código pra entender o porquê do "status 0" mas só me confirme por favor se a API está sendo executada e se aparece uma mensagem como essa no seu terminal

uma imagem como essa no seu terminal

Está sim!!

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Olá Mariana, só consigo reproduzir seu erro aqui quando informo a url errada. Mas vi no seu arquivo de transferencia.service.ts que você está informando a url corretamente.

Você criou o arquivo db.json igual ao que o professor fez na aula?

Porque no print da sua 'api' aparecem algumas rotas que não existem no projeto, então desconfio que isso seja a causa do status 404 ( Not Found ). Veja como está no seu terminal, na parte de Resources:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Agora veja no meu:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Vamos ver se é isso mesmo? Altere o seu arquivo db.json e cole o conteúdo que está abaixo:

{
  "transferencias": [
    {
      "id": "1",
      "valor": 35,
      "destino": "1212-1",
      "data": "2020-11-04T16:30:10.710Z"
    },
    {
      "id": "2",
      "valor": 40,
      "destino": "1213-1",
      "data": "2020-11-04T21:24:10.710Z"
    },
    {
      "id": "3",
      "valor": 12.5,
      "destino": "1214-1",
      "data": "2020-11-05T21:14:10.710Z"
    }
  ]
}

E execute novamente com o comando json-server --watch db.json. Pare a aplicação no front e executa de novo com o ng serve também só para garantir :) .

Me informa se deu certo, tá?

Espero ter ajudado! Abraços!

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

solução!

Olá Mariana, que estranho. Você tem que estar com a api rodando em um terminal e o projeto do front em outro, e os dois ao mesmo tempo. Está fazendo assim?

Ou você roda a api, dá CTRL+C e depois o executa o ng serve? (Pelo print do seu terminal, parece isso).

Ah, se você puder colocar seu projeto no gitHub, seria melhor para eu testar e tentar entender o que está acontecendo.

Consegui, era isso mesmo. Muito obrigada, de verdade. Eu tava parando o terminal da api porque não sabia que podiam rodar ambos juntos. ;)

Uhuuulllll \o/

Imagina, fico feliz que deu certo! :)

Como no nosso caso, estamos consumindo dados de uma api local (o arquivo db.json), que está na nossa própria máquina, é necessário que ela esteja sendo executada ("rodando") para fornecer os dados que precisamos que sejam carregados no front e para cadastrar novos dados também.

Por isso, para simular a comunicação com o backend, criamos esse "servidor fake" (para nos servir os dados).

E é isso aí, bora codar!