El checklist de Angular Router que evita los errores que todos cometen

Cómo funciona el Router de Angular

El Router de Angular traduce una URL en un árbol de componentes. Cada segmento de la URL corresponde a una ruta, y cada ruta puede tener guards, resolvers y lazy chunks propios. El orden en que declaras las rutas importa: el Router recorre el array de arriba a abajo y se detiene en la primera coincidencia.

export const routes: Routes = [
  { path: 'dashboard', canMatch: [authGuard], loadChildren: () => import('./dashboard/routes') },
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: '**', component: NotFoundComponent }, // siempre al final
];

Guards: cuándo usar cada uno

• canActivate: Decide si el usuario puede acceder a la ruta una vez que el chunk ya está cargado. Útil para verificar sesión en rutas síncronas.
• canMatch: Se evalúa antes de cargar el chunk. Si devuelve false, Angular ni siquiera descarga el bundle de esa ruta. Úsalo para lazy routes protegidas — es la opción correcta en la mayoría de casos.
• canDeactivate: Pregunta al usuario si quiere salir de una ruta con cambios sin guardar. Imprescindible en formularios de edición.
• Guards funcionales (v15+): Ya no necesitas una clase con CanActivate. Un guard es una función que devuelve boolean | UrlTree | Observable | Promise. Más simple, más testeable.

Resolvers modernos: datos sin bloquear

• withComponentInputBinding(): Actívalo en provideRouter. Los datos del resolver llegan al componente como @Input() con el mismo nombre que la key del resolver. Sin inyectar ActivatedRoute.
• Resolver como función: Al igual que los guards, un resolver es una función que devuelve el dato o un Observable/Promise. inject() funciona dentro de ella.
• No bloquees con datos pesados: El resolver retrasa la navegación hasta que resuelve. Para datos no críticos, carga en el ngOnInit del componente y muestra un skeleton — el UX es mejor.

Lazy loading y preload strategies

• loadChildren con import() dinámico: Cada ruta lazy tiene su propio chunk. El bundle principal no incluye ese código hasta que el usuario navega por primera vez a esa ruta.
• PreloadAllModules: Carga todos los chunks lazy en segundo plano tras el arranque. Bueno para apps pequeñas; en apps grandes carga código que quizás nunca se usa.
• Estrategia propia con withPreloading(): Implementa QuicklinkStrategy (preload solo las rutas visibles en pantalla) o una estrategia basada en permisos del usuario.
• loadComponent para rutas standalone: Si la ruta apunta a un componente standalone en lugar de un módulo, usa loadComponent en lugar de loadChildren.

Los errores más comunes antes de hacer merge

• Ruta wildcard antes del 404: Si pones ** antes de otras rutas, el Router siempre coincide ahí y nunca llega a las rutas reales. Va siempre al final.
• pathMatch: 'full' olvidado en redirects de raíz: { path: '', redirectTo: 'home' } sin pathMatch: 'full' redirige también rutas como /about porque '' coincide con cualquier prefijo.
• scrollPositionRestoration desactivado: Por defecto Angular no restaura el scroll al navegar. Activa scrollPositionRestoration: 'enabled' en withInMemoryScrolling() para que el usuario no quede a mitad de página.
• Guards síncronos que hacen HTTP: Un guard que hace fetch bloquea la navegación visiblemente. Usa canMatch, cachea la respuesta en un servicio o muestra un loader explícito.