Olá Elisangela.

Você poderia mandar o código html do AppComponent para ver como está?

Aguardo.

Bom dia, Diego.

É o primeiro código informado acima:

App.component.html**

Extrato Nova Transferencia *** nova-transferencia.ts import { TransferenciasService } from './../services/transferencias.service'; import { Transferencia } from './../models/transferencia.model'; import { HttpClient } from '@angular/common/http'; import { Component, OnInit, Output } from '@angular/core'; import { EventEmitter } from '@angular/core'; @Component({ selector: 'app-nova-transferencia', templateUrl: './nova-transferencia.component.html', styleUrls: ['./nova-transferencia.component.scss'], }) export class NovaTransferenciaComponent implements OnInit { @Output() aoTransferir = new EventEmitter();

valor: number; destino: number | string;COPIAR CÓDIGO constructor(private service: TransferenciasService) {}

ngOnInit() {}

transferir() { console.log('Solicitado nova transferência'); const valorEmitir = {Valor: this.valor, Destino:this.destino}; this.service.adicionar(valorEmitir).subscribe(resultado =>{ console.log(resultado) this.limparCampos(); }, error => console.error(error));

}

limparCampos(){ this.valor = 0; this.destino = 0; }

}

Olá Elisangela, tudo bem?

O arquivo html que eu me refiro é o seguinte: A estrutura do seu deve seguir da mesma forma. É importante se atentar que a nomenclatura dada para as rotas pode afetar no funcionamento do roteamento dos componentes, portanto veja se o seu AppRoutingModule se o nome passado para o path das rotas é o mesmo informado no arquivo html acima.

Veja o exemplo da aula:

import { ExtratoComponent } from './extrato/extrato.component';
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { NovaTransferenciaComponent } from './nova-transferencia/nova-transferencia.component';

export const routes: Routes = [
  // Redirecionamento ao iniciar 
  {
    path: '', redirectTo: 'extrato', pathMatch: 'full'
  },
  // Roteamento para o ExtratoComponent
  {
    path: 'extrato', component: ExtratoComponent
  },
  // Roteamento para o NovaTransferenciaComponent
  {
    path: 'nova-transferencia', component: NovaTransferenciaComponent
  }
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule{}

Outro ponto importante é verificar se for feito a importação do AppRoutingModule no Módulo principal da aplicação, o AppModule.

Espero ter ajudado.

Bom dia, Diego.

Ainda não funcionou, não fui capaz de localizar o local da falha. Estou enviando os meus arquivos novamente.

1 - App.component.html

<header>
    <a routerLink="extrato">Extrato</a>
    <a routerlink="nova-transferencia" routerLinkActive="ativo">Nova Transferencia</a>
</header>

<main>
  <router-outlet></router-outlet>
</main>

2 - app.routing.module.ts

import { ExtratoComponent } from './extrato/extrato.component';
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { NovaTransferenciaComponent } from './nova-transferencia/nova-transferencia.component';

export const routes: Routes = [
  // Redirecionamento ao iniciar
  {
    path: '', redirectTo: 'extrato', pathMatch: 'full'
  },
  // Roteamento para o ExtratoComponent
  {
    path: 'extrato', component: ExtratoComponent
  },
  // Roteamento para o NovaTransferenciaComponent
  {
    path: 'nova-transferencia', component: NovaTransferenciaComponent
  }
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule{}

3 - app.module.ts

import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { DEFAULT_CURRENCY_CODE, LOCALE_ID, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { NovaTransferenciaComponent } from './nova-transferencia/nova-transferencia.component';
import { ExtratoComponent } from './extrato/extrato.component';
import { registerLocaleData } from '@angular/common';
import  localePt from '@angular/common/locales/pt';

registerLocaleData(localePt, 'pt')
@NgModule({
  declarations: [
    AppComponent,
    NovaTransferenciaComponent,
    ExtratoComponent
   ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    //Importação do módulo de roteamento
    AppRoutingModule
  ],
  providers: [
    {provide: LOCALE_ID, useValue: 'pt'},
    {
      provide: DEFAULT_CURRENCY_CODE,
      useValue: 'BRL'
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Olá Elisangela, tudo bem?

Acho que pode ser algum erro de nomenclatura dos seus arquivos. Poderia mandar um print com os arquivos da pasta App para fazer uma comparação com os códigos que mandou?

Aguardo.

Olá Elisangela.

Acabei percebendo que no seu app.component.html está com o atributo routerLink está com o "L" minúsculo, verifica ai no seu código e vamos ver se resolve.

<header>
    <a routerLink="extrato">Extrato</a>

    //Aqui nessa linha
    <a routerLink="nova-transferencia" routerLinkActive="ativo">Nova Transferencia</a>
</header>

Aguardo.