[Dúvida] Minhas rotas não estão respondendo

Olá Rodrigo!

Que legal que está usando seus conhecimentos para criar um projeto em angular, praticar é a melhor forma de aprender! :)

Pelos prints que você enviou, consigo te dar algum direcionamento sobre o que pode estar causando o problema nas rotas e como você pode resolver.

O projeto está sendo desenvolvido na versão 17 do angular, correto? Pergunto isso por que percebi, pela estrutura de pastas, a presença dos arquivos app.routes.ts e app.config.ts.

E logo aí já pode estar o problema, pois também existe um arquivo app.routing.module.ts, que é onde você está criando as rotas. Talvez o angular esteja lendo o app.routes.ts e não o app-routing.module.ts como arquivo de rotas principal.

Verifique como está o arquivo app.config.ts, se nele consta a importação do provideRouter, como no exemplo a seguir:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
};

E a depender da abordagem que você esteja utilizando (módulos e/ou standalone components), a forma de importar os módulos necessários para a utilização das rotas também muda.

Na abordagem modular, você precisa importar o RouterModule no array de imports do seu módulo, como já está fazendo. Algo assim:

import { RouterModule } from "@angular/router";
import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { ReactiveFormsModule } from "@angular/forms";
//código omitido

@NgModule({
  declarations: [
    //código omitido
  ],
  imports: [
    RouterModule,
    CommonModule,
    MaterialModule,
    ReactiveFormsModule
  ],
  exports: [
    //código omitido
  ]
})
export class SharedModule { }

E também precisa importar o app-routing.module.ts no app.module.ts.

Já se estiver utilizando standalone components, vai precisar importar a diretiva RouterLink no próprio componente. Assim:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-perfil-contato',
  standalone: true,
  imports: [
    CommonModule,
    RouterLink
  ],
  templateUrl: './perfil-contato.component.html',
  styleUrl: './perfil-contato.component.css'
})
export class PerfilContatoComponent implements OnInit{
    //código da classe
}

Espero que essas observações te auxiliem a resolver o problema. Abraços, bons estudos!