Um guia prático e simples para trabalhar com rotas no angular.
Publicado em 16 de maio de 2026
Trabalhar com rotas no angular é um processo bem simples, a primeira coisa que devemos fazer é criar o arquivo app.routes.ts (caso não tenha), dai dentro desse arquivo nós simplesmente criamos uma const e exportamos a variavel associando o seu valor a Routes que faz parte do pacote @angular/router
import { Routes } from '@angular/router';
export const routes: Routes = []
O próximo passo é criarmos as nossas rotas que irão apontar para as telas (componentes) e cada uma precisa estar dentro de um objeto:
Sendo o path nada mais que o caminho da nossa rota após a url, exemplo: http://localhost:4200/path-aqui e o component é o próprio caminho que esse path vai apontar, no nosso exemplo abaixo quando o path vem vazio '' ele direciona para a home.
export const routes: Routes = [
{path: '' , component: Home},
{path: 'partners', component: Partners}
]
E por fim, devemos colocar o router outlet no componente que desejamos gerenciar as rotas, nesse exemplo usei o componente app.html
<router-outlet></router-outlet>
e no app.ts nós importamos o RouterOutlet
//app.ts
import { RouterOutlet } from '@angular/router';
Pronto, com isso já podemos testar e ver as nossas rotas funcionando
Tela de não encontrado
Também podemos configurar o path para quando o usuário digitar uma rota que não existe Ex: http://localhost:4200/xpto ele direcione para uma pagina de não encontrado, para isso basta usarmos o path: '**'
//app.routes.ts
{ path: '**', redirectTo: 'card' }
Pegando o parâmetro da rota
Suponha que você queira pegar o parâmetro de uma rota que pode ser dinâmico, exemplo http://localhost:4200/user/1 ou http://localhost:4200/user/2 , para isso, basta usarmos :id conforme exemplo abaixo:
//app.routes.ts
{path: 'user/:id', component: User},
Nesse caso, ele vai chamar a rota /user e o que está como :id nada mais é que o valor dinâmico
Dai o próximo passo é importar o ActivatedRoute do pacote @angular/router
import { ActivatedRoute } from '@angular/router';
ngOnInit() {
const id = this.route.snapshot.paramMap.get('id')
console.log('Id:', id)
}
Sendo o snapshot uma foto da url no momento ex: /user/23 ou /card/100 e o paramMap é um “mapa” dos parâmetros da rota.
path: 'user/:id'
↑
paramMap.get('id')
Uma outra maneira também é usarmos o subscribe para pegar o parâmetro:
this.route.paramMap.subscribe(params => {
const id = params.get('id');
console.log('Id:', id);
});
Pegando valores do Query params
Aprendemos como pegar o parâmetro da rota, no nosso exemplo acima /user/id, porém em algumas situações vamos precisar pegar os Query params da url que vem seguidos depois do ?
Exemplo: http://localhost:4200/login?campaignId=123&utm_source=google
import { ActivatedRoute } from '@angular/router';
this.route.queryParamMap.subscribe(params => {
const campaignId = params.get('campaignId');
const utmSource = params.get('utm_source');
console.log(campaignId);
console.log(utmSource);
});
Note que o processo é semelhante ao que fizemos no exemplo do user/id, nesse caso usamos o queryParamMap e nos inscrevemos para pegar os parâmetros
Lazy Loading
No angular podemos trabalhar com o carregamento sob demanda (lazy-loading), para isso basta usarmos o loadComponent após o path Ex:
import { Routes } from '@angular/router';
export const routes: Routes = [
{ path: '', component: Gallery },
{
path: 'calculator',
loadComponent: () => import('./components/calculator/calculator').then(m => m.Calculator)
},
{ path: 'partners/:id', component: Partners },
{ path: '**', redirectTo: 'card' }
]
e no componente que será carregado, nesse exemplo o Calculator temos que definir standalone: true,
@Component({
selector: 'app-calculator',
templateUrl: './calculator.html',
standalone: true,
imports: [RouterLink],
styleUrl: './calculator.scss',
})
Esse exemplo usa componentes standalone, recurso disponível a partir do Angular 14.
Em projetos mais antigos, como Angular 12, o lazy loading normalmente é feito com módulos usando loadChildren.
Exemplo:
// app-routing.module.ts
const routes: Routes = [
{
path: 'calculator',
loadChildren: () =>
import('./components/calculator/calculator.module')
.then(m => m.CalculatorModule)
}
];
// calculator-routing.module.ts
const routes: Routes = [
{
path: '',
component: CalculatorComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class CalculatorRoutingModule {}
// calculator.module.ts
@NgModule({
declarations: [CalculatorComponent],
imports: [
CommonModule,
CalculatorRoutingModule
]
})
export class CalculatorModule {}
Resumo:
Angular 14+ standalone -> loadComponent
Angular 12 com módulo -> loadChildren
Pronto, isso já configura o lazy-loading, lembrando que sem lazy-loading o angular já baixa todas as telas no inicio, mesmo que o usuário nunca entre nelas, com lazy-loading ele só baixa sob demanda, se o usuário entrar em /user/1 carrega só essa tela e se entrar em /calculator carrega apenas ela.
Carregando comentários...