Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Minha página está em branco

Referente ao curso Angular: explorando o framework, no capítulo Transferências e atividade Enviando dados para o componente

por Lorena Cristine de Almeida Silva
| 28k xp | 5 posts
Estagiária de desenvolvimento

pagina do navegador em branco

Antes dessa aula estava funcionando normal. Estou com seguinte erro no terminal ao tentar salvar:

Date: 2021-09-10T15:31:33.367Z - Hash: 559ab95e154e5d853ea1
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 21.3 kB [initial] [rendered]
Time: 307ms
: Compiled successfully.

    ERROR in src/app/app.module.ts:13:5 - error NG6001: The class 'ExtratoComponent' is listed in the declarations of the NgModule 'AppModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.

    13     ExtratoComponent
           ~~~~~~~~~~~~~~~~

      src/app/extrato/extrato.component.ts:8:14
        8 export class ExtratoComponent implements OnInit {
                       ~~~~~~~~~~~~~~~~
        'ExtratoComponent' is declared here.
    src/app/app.component.html:1:1 - error NG8001: 'app-nova-transferencia' is not a known element:
    1. If 'app-nova-transferencia' is an Angular component, then verify that it is part of this module.
    2. If 'app-nova-transferencia' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

    1 <app-nova-transferencia
      ~~~~~~~~~~~~~~~~~~~~~~~
    2   (aoTransferir)="transferir($event)"
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    3 ></app-nova-transferencia>
      ~~~~~~~~~~~~~~~~~~~~~~~~~~

      src/app/app.component.ts:5:16
        5   templateUrl: './app.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component AppComponent.
    src/app/app.component.html:5:1 - error NG8001: 'app-extrato' is not a known element:
    1. If 'app-extrato' is an Angular component, then verify that it is part of this module.
    2. If 'app-extrato' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

    5 <app-extrato [transferencia]="transferencia"></app-extrato>
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

      src/app/app.component.ts:5:16
        5   templateUrl: './app.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component AppComponent.
    src/app/app.component.html:5:14 - error NG8002: Can't bind to 'transferencia' since it isn't a known property of 'app-extrato'.
    1. If 'app-extrato' is an Angular component and it has 'transferencia' input, then verify that it is part of this module.
    2. If 'app-extrato' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

    5 <app-extrato [transferencia]="transferencia"></app-extrato>
                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

      src/app/app.component.ts:5:16
        5   templateUrl: './app.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component AppComponent.
5 respostas
por Weiglas Soriano Ribeiro
| 7.1k xp | 11 posts
Desenvolvedor

Boa tarde, Lorena. Você poderia postar aqui como está o seu arquivo app.component.ts?

Nele estão sendo importados os componentes?

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

E sendo declarados?

@NgModule({
    declarations: [
        AppComponent,
        NovaTransferenciaComponent,
        ExtratoComponent,
      ],
      // resto dos parâmetros
  })
por Lorena Cristine de Almeida Silva
| 28k xp | 5 posts
Estagiária de desenvolvimento

Boa tarde! Esse é meu codigo do app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'projectBytebank';
  //destino: number;
  //valor: number;
  transferencia: any;

  transferir($event){
    console.log($event);
    //this.destino = $event.destino;
    //this.valor = $event.valor;
    this.transferencia = $event;
  }
}

Porém mesmo fazendo a alteração recomendada, estou com esse retorno do VS Code

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

por Weiglas Soriano Ribeiro
| 7.1k xp | 11 posts
Desenvolvedor

Ei, Lorena! Me desculpe, acho que eu confundi os arquivos. Eu deveria ter te pedido o arquivo app.module.ts! Desfaça as alterações no app.component.ts e adicione os códigos no app.module.ts. O decorator ngModule deve ser usado num módulo, por isso que aí no component está dando o erro.

por Lorena Cristine de Almeida Silva
| 28k xp | 5 posts
Estagiária de desenvolvimento

Ah sim! Sem problemas. Meu arquivo app.module.ts está assim: 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NovaTransferenciaComponent } from './nova-transferencia/nova-transferencia.component';
import { FormsModule } from '@angular/forms';
import { ExtratoComponent } from './extrato/extrato.component';

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

Não fiz as alterações sugeridas pois ja estavam no meu arquivo

solução!
por Lorena Cristine de Almeida Silva
| 28k xp | 5 posts
Estagiária de desenvolvimento

Boa tarde! Acredito que tudo foi solucionado reiniciando o VS Code hahahaha. Reiniciei minha máquina e apos dar ng serveo projeto seguiu funcionando como normalmente e está compilando.

Mesmo assim, obrigada pela ajuda :D.