Trabalhando com rotas no Angular

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.