Estou fazendo um projeto em Angular, e estou querendo redirecionar os caminhos ao clicar em botões, porém não sei o que ocorre e estou tendo problemas:
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!
Estou fazendo um projeto em Angular, e estou querendo redirecionar os caminhos ao clicar em botões, porém não sei o que ocorre e estou tendo problemas:
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!