El router de Angular: convertir componentes en páginas

Hasta ahora tenías componentes sueltos. Una app real tiene PÁGINAS —una lista, un detalle, unas estadísticas— y una URL para cada una, con navegación e historial del navegador. El Router de Angular hace ese trabajo: mapea rutas (URLs) a componentes y los intercambia sin recargar la página. Si vienes de React Router (SC-06 M07), reconocerás cada concepto; cambia la sintaxis y gana integración de fábrica. Hoy montas el router y navegas entre páginas.

El directorio del centro comercial

Definir las rutas

Las rutas son un array de objetos que mapean un path a un componente:

import { Routes } from '@angular/router';
import { ListaGastosComponent } from './lista-gastos.component';
import { EstadisticasComponent } from './estadisticas.component';

export const routes: Routes = [
{ path: '',            component: ListaGastosComponent },   // la home
{ path: 'estadisticas', component: EstadisticasComponent },
{ path: '**',          component: NoEncontradoComponent }, // comodín: 404
];

Y las registras en el arranque de la app con provideRouter:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

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

El orden importa en los comodines: path: '**' (cualquier ruta no reconocida) va al final, como el default de un switch. Es tu página 404.

Mostrar la página activa: router-outlet

<router-outlet> es el hueco donde el router pinta el componente de la ruta activa. Todo lo que esté FUERA del outlet (un header, un menú) permanece; solo cambia lo del outlet:

import { Component } from '@angular/core';
import { RouterOutlet, RouterLink } from '@angular/router';

@Component({
selector: 'app-root',
imports: [RouterOutlet, RouterLink],
template: `
  <nav>
    <a routerLink="/">Gastos</a>
    <a routerLink="/estadisticas">Estadísticas</a>
  </nav>
  <router-outlet />   <!-- aquí se pinta la página activa -->
`,
})
export class AppComponent {}

Navegar: routerLink (no href)

Para enlaces, usa routerLink en lugar de href. La diferencia es crucial: href recarga la página entera (pierdes el estado, la app se reinicia); routerLink hace navegación del lado del cliente —instantánea, sin recarga—:

// ✅ navegación SPA, sin recargar
<a routerLink="/estadisticas">Ver estadísticas</a>

// ❌ recarga toda la página (evítalo dentro de la app)
<a href="/estadisticas">Ver estadísticas</a>

// enlace con estado activo: routerLinkActive añade una clase cuando la ruta coincide
<a routerLink="/estadisticas" routerLinkActive="activo">Estadísticas</a>

Es el mismo concepto que <Link> vs <a> de React Router, y routerLinkActive es el equivalente de NavLink/isActive.

Navegar desde la lógica: el servicio Router

Cuando la navegación no nace de un clic en un enlace, sino de código (tras guardar un gasto, por ejemplo), inyectas el servicio Router:

import { Component, inject } from '@angular/core';
import { Router } from '@angular/router';

@Component({ selector: 'app-form', template: `...` })
export class FormComponent {
private router = inject(Router);

async guardar() {
  // ...guardar el gasto...
  this.router.navigate(['/estadisticas']);   // navegar por lógica
}
}

navigate recibe un array de "segmentos" de la ruta —['/gasto', id] produce /gasto/5—. Es el equivalente de useNavigate de React Router.

Antes (RouterModule) vs Ahora (provideRouter)

Mini-reto

Diseña el esqueleto de rutas de "Mi Bolsillo": 1) un array Routes con '' (lista de gastos), 'estadisticas', 'nuevo' (formulario) y '**' (404); 2) el AppComponent con un <nav> de routerLink a cada página y un <router-outlet />; 3) en el FormComponent, escribe el método que, tras guardar, navega a '' con el servicio Router. Marca cuál enlace usaría routerLinkActive.

Qué sigue

Ya navegas entre páginas fijas. Pero muchas páginas dependen de un DATO en la URL: /gasto/5 muestra el gasto 5, /gasto/8 el 8. La próxima lección son los parámetros de ruta —y su versión moderna más elegante: recibirlos como SEÑALES directamente como inputs del componente—.