Reto: el mapa de rutas de Mi Bolsillo con guard

Reto35 min60 XP

Vas a diseñar el sistema de navegación completo de "Mi Bolsillo": el mapa de rutas (con parámetros, lazy y protección) y —para entenderlo por dentro— un mini-emparejador de URLs que resuelve qué ruta corresponde a una dirección y aplica un guard. Es el sello "construye tu versión" aplicado al router: cuando funcione, sabrás exactamente qué hace Angular al navegar.

Reto

Rutas protegidas y un emparejador de URLs

Media35 min60 XP(×2 sin mirar la solución)

Qué debes construir

Dos partes:

El mapa de rutas de Angular (código exacto): '' (lista), 'gasto/:id' (detalle, con parámetro), 'estadisticas' (lazy), 'admin' (lazy + protegida por authGuard) y '**' (404). Con provideRouter(routes, withComponentInputBinding()).
Un mini-emparejador en vivo: dada una URL como /gasto/8, encuentra la ruta que coincide, extrae los parámetros ({ id: "8" }), y aplica el guard si la ruta lo tiene (dejando pasar o redirigiendo). Es el corazón de lo que hace el router.

Reglas

El emparejador debe soportar segmentos dinámicos :param y extraer sus valores.
El comodín ** coincide con cualquier cosa (404) y va al final.
El guard decide con un estado de sesión: si la ruta es protegida y no hay sesión, redirige.

35:00

Cuando estés listo, arranca el reloj.

El razonamiento. El router hace, en esencia, tres cosas en cada navegación: (1) EMPAREJAR la URL con la primera ruta cuyo patrón coincida, tratando :param como comodín que captura un valor; (2) EXTRAER los parámetros para entregárselos al componente; (3) consultar los GUARDS de esa ruta antes de activarla. Construir el emparejador desmitifica todo: :id no es magia, es "cualquier segmento en esta posición, guárdalo con este nombre". El orden de las rutas importa porque se devuelve la primera coincidencia —por eso el comodín ** va al final, como el default de un switch—.

Primero, el mapa de rutas real de Angular:

app.routes.ts

import { Routes } from '@angular/router';
import { ListaGastosComponent } from './lista-gastos.component';
import { authGuard } from './auth.guard';

export const routes: Routes = [
{ path: '', component: ListaGastosComponent },
{
  path: 'gasto/:id',
  loadComponent: () => import('./detalle-gasto.component').then((m) => m.DetalleGastoComponent),
},
{
  path: 'estadisticas',
  loadComponent: () => import('./estadisticas.component').then((m) => m.EstadisticasComponent),
},
{
  path: 'admin',
  canActivate: [authGuard],
  loadComponent: () => import('./admin.component').then((m) => m.AdminComponent),
},
{ path: '**', component: NoEncontradoComponent },
];
// en app.config.ts:  provideRouter(routes, withComponentInputBinding())

Y el emparejador en vivo, el motor por dentro:

Qué observar:

/gasto/8 empareja gasto/:id y extrae { id: "8" } —eso es lo que tu componente recibe como input() señal—.
/admin sin sesión NO devuelve el componente: el guard lo intercepta y redirige al login con volverA. Con sesión, pasa.
/ruta-inventada cae en ** → 404, porque es la última y coincide con todo.
El ORDEN es la clave: se devuelve la primera coincidencia. Si pusieras ** primero, ¡todas las URLs serían 404!

Angular añade lazy loading (cargar el chunk al emparejar), resolvers (esperar datos antes de activar), rutas anidadas y más. Pero el núcleo —emparejar patrón, extraer params, consultar guards— es exactamente lo que acabas de escribir.

Qué sigue

Terminaste el módulo de routing: tu app es navegable, con páginas protegidas, parámetros reactivos y carga perezosa. Ahora las páginas necesitan CAPTURAR datos del usuario: crear un gasto, editarlo, validar la entrada. El próximo módulo son los FORMULARIOS de Angular —template-driven y reactivos, tipados, con validaciones—, la puerta por la que entran los datos a tu aplicación.