Routes en Angular

El concepto de rutas o routes se refiere a la capacidad de definir diferentes vistas o componentes correspondientes a diferentes rutas de URL en una aplicación de una sola página (SPA).

Esto permite a los usuarios navegar por la aplicación cambiando la URL y ver diferentes partes de la interfaz de usuario sin recargar la página.

Conceptos clave de routes

Routes: Es una colección de objetos Route que definen cómo el router debe navegar entre diferentes vistas de la aplicación. Cada Route es un objeto que contiene propiedades clave como path, component, redirectTo, y otras configuraciones avanzadas.

Route Parameters: Las rutas pueden incluir parámetros que permiten a la aplicación ser más dinámica. Estos parámetros pueden ser opcionales o requeridos y se utilizan para pasar información a los componentes.

Nested Routes: Angular permite definir rutas anidadas, donde una ruta padre puede tener rutas hijas que se representan dentro del contexto del componente padre.

Lazy Loading: Las rutas pueden configurarse para cargar componentes de manera diferida (lazy loading) mediante loadComponent o loadChildren, lo que mejora el rendimiento al cargar solo lo necesario en lugar de toda la aplicación al inicio.

Guards funcionales: Los guards son funciones que controlan el acceso a las rutas. En Angular 21, se utilizan guards funcionales como CanActivateFn, CanDeactivateFn y CanMatchFn en lugar de las interfaces basadas en clases.

Configuración de routes

En Angular 21, las rutas se definen en el archivo app.routes.ts y se registran mediante provideRouter() en app.config.ts. Este es el enfoque estándar y recomendado en todas las aplicaciones Angular modernas.

Configuración de rutas en app.routes.ts:

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', component: PageNotFoundComponent }
];

Registro en app.config.ts:

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

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

En este ejemplo:

• La ruta '' redirige a /home utilizando redirectTo y pathMatch: 'full'.
• La ruta /home carga el componente HomeComponent.
• La ruta /about carga el componente AboutComponent.
• La ruta ** actúa como un comodín que captura cualquier ruta no definida, mostrando un componente de página no encontrada (PageNotFoundComponent).

Parámetros de ruta

Las rutas pueden aceptar parámetros, lo que permite a la aplicación ser más dinámica y flexible. Los parámetros pueden ser necesarios para ciertas rutas y se utilizan para pasar datos al componente correspondiente.

Ejemplo de parámetros de ruta:

export const routes: Routes = [
  { path: 'article/:id', component: ArticleComponent }
];

Para acceder a los parámetros dentro del componente se utiliza inject(ActivatedRoute):

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

@Component({
  selector: 'app-article',
  template: `<h1>Artículo {{ articleId }}</h1>`
})
export class ArticleComponent implements OnInit {
  private route = inject(ActivatedRoute);
  articleId: string | null = null;

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.articleId = params.get('id');
    });
  }
}

Rutas anidadas

Las rutas anidadas permiten que una ruta padre tenga rutas hijas que se representan dentro del contexto del componente padre. Esto es útil para organizar la navegación de manera jerárquica.

Ejemplo de rutas anidadas:

export const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: 'profile', component: ProfileComponent },
      { path: 'settings', component: SettingsComponent }
    ]
  }
];

Carga diferida (Lazy Loading)

Angular soporta la carga diferida de componentes y rutas, lo que mejora el rendimiento de la aplicación al cargar solo lo necesario en lugar de toda la aplicación al inicio.

Lazy loading de un componente standalone con loadComponent:

export const routes: Routes = [
  {
    path: 'feature',
    loadComponent: () => import('./feature/feature.component').then(m => m.FeatureComponent)
  }
];

Lazy loading de un grupo de rutas con loadChildren:

export const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.routes').then(m => m.default)
  }
];

Guards funcionales

Los guards funcionales permiten controlar el acceso a las rutas mediante funciones simples que utilizan inject() para acceder a servicios. Este es el enfoque recomendado en Angular 21.

import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from './auth.service';

export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isLoggedIn()) {
    return true;
  }
  return router.parseUrl('/login');
};

Y en la configuración de rutas:

export const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [authGuard] }
];

Resolvers funcionales

Los resolvers funcionales permiten obtener datos antes de que una ruta se active, asegurando que el componente tenga todos los datos necesarios al cargar.

import { inject } from '@angular/core';
import { ResolveFn } from '@angular/router';
import { DataService } from './data.service';

export const dataResolver: ResolveFn<any> = (route, state) => {
  const dataService = inject(DataService);
  return dataService.getData();
};

Y en la configuración de rutas:

export const routes: Routes = [
  { path: 'data', component: DataComponent, resolve: { data: dataResolver } }
];

Configuración completa de ejemplo

Un ejemplo completo de una aplicación Angular 21 con app.routes.ts y app.config.ts:

// app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  {
    path: 'home',
    loadComponent: () => import('./home/home.component').then(m => m.HomeComponent)
  },
  {
    path: 'products',
    loadComponent: () => import('./products/products.component').then(m => m.ProductsComponent)
  },
  {
    path: 'products/:id',
    loadComponent: () => import('./product-detail/product-detail.component').then(m => m.ProductDetailComponent)
  },
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.routes').then(m => m.default),
    canActivate: [authGuard]
  },
  { path: '**', redirectTo: '/home' }
];

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { routes } from './app.routes';

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