Configuración del Router

Rutas básicas

El sistema de enrutado de Angular permite crear aplicaciones de una sola página (SPA) donde diferentes URLs muestran contenido dinámico sin recargar el navegador. Para configurar las rutas básicas, necesitamos definir la correspondencia entre URLs y los componentes que se deben renderizar.

Definición de rutas con la interfaz Routes

Las rutas en Angular se definen mediante un array que implementa la interfaz Routes en app.routes.ts:

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

export const routes: Routes = [];

Para añadir una ruta se crea un objeto que especifica cómo debe comportarse la aplicación cuando el usuario navega a una URL específica, cada ruta es un objeto:

// archivo app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

export const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

Propiedades fundamentales de una ruta

Cada definición de ruta contiene propiedades específicas que determinan su comportamiento:

• path: Define el segmento de URL que activará esta ruta

{ path: 'productos', component: ProductosComponent }
// Se activa con: /productos

• component: Especifica qué componente se renderizará cuando la ruta coincida

{ path: 'contacto', component: ContactoComponent }

Ruta por defecto y redirecciones

Para manejar la navegación inicial cuando un usuario accede a la raíz de la aplicación, utilizamos redirecciones:

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

La propiedad pathMatch determina cómo Angular debe hacer la coincidencia:

• full: La URL debe coincidir exactamente con el path especificado

{ path: '', redirectTo: '/dashboard', pathMatch: 'full' }
// Solo redirige si la URL es exactamente '/'

• prefix: Angular comprueba si la URL comienza con el path especificado

{ path: 'admin', redirectTo: '/admin/dashboard', pathMatch: 'prefix' }
// Redirige URLs como '/admin/cualquier-cosa'

Ruta comodín para manejo de errores 404

La ruta comodín utiliza el path ** y debe ser la última en el array de rutas. Captura cualquier URL que no coincida con las rutas anteriores:

export const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  { path: '**', component: NotFoundComponent }  // Debe ir al final
];

Ejemplo completo de configuración básica

Un archivo de rutas típico para una aplicación sencilla incluye todas estas configuraciones:

// app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './components/home.component';
import { AboutComponent } from './components/about.component';
import { ServicesComponent } from './components/services.component';
import { ContactComponent } from './components/contact.component';
import { NotFoundComponent } from './components/not-found.component';

export const routes: Routes = [
  // Ruta por defecto
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  
  // Rutas principales
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'services', component: ServicesComponent },
  { path: 'contact', component: ContactComponent },
  
  // Ruta comodín para 404 (siempre al final)
  { path: '**', component: NotFoundComponent }
];

Rutas anidadas básicas

Angular permite crear jerarquías de rutas para estructuras más complejas utilizando la propiedad children:

export const routes: Routes = [
  { 
    path: 'dashboard', 
    component: DashboardComponent,
    children: [
      { path: 'stats', component: StatsComponent },
      { path: 'reports', component: ReportsComponent }
    ]
  }
];

Estas rutas anidadas se activarían con URLs como /dashboard/stats o /dashboard/reports, donde el DashboardComponent actúa como contenedor para los componentes hijos.

Router standalone

En las aplicaciones standalone de Angular 20, la configuración del router se realiza de forma diferente a las aplicaciones tradicionales basadas en NgModules. El enfoque moderno utiliza provideRouter() en lugar de RouterModule.forRoot(), ofreciendo una configuración más directa y funcional.

Configuración con provideRouter()

La función provideRouter() es el método recomendado para configurar el router en aplicaciones standalone. Esta función acepta el array de rutas y devuelve los providers necesarios para el sistema de enrutado:

// 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),
    // otros providers...
  ]
};

Bootstrap de aplicación standalone

Para inicializar una aplicación standalone con enrutado, utilizamos bootstrapApplication() en lugar del método tradicional con NgModules:

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

Estructura del componente principal

El componente raíz de una aplicación standalone debe importar las directivas del router directamente y incluir el <router-outlet> donde se renderizarán los componentes:

// app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  template: `
    <nav>
      <!-- Navegación aquí -->
    </nav>
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
  title = 'mi-aplicacion';
}

Ejemplo completo de configuración standalone

Un ejemplo completo que muestra cómo estructurar una aplicación standalone con router:

Archivo de configuración:

// 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(),
    // Aquí irían otros providers como provideAnimations(), etc.
  ]
};

Archivo de rutas:

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

export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { 
    path: 'home', 
    loadComponent: () => import('./pages/home.component').then(c => c.HomeComponent)
  },
  { 
    path: 'about', 
    loadComponent: () => import('./pages/about.component').then(c => c.AboutComponent)
  },
  { path: '**', redirectTo: '/home' }
];

Ventajas del enfoque standalone

La configuración standalone del router ofrece múltiples beneficios:

• Simplicidad: Eliminación del boilerplate de NgModules
• Tree-shaking mejorado: Solo se incluye el código que realmente se utiliza
• Configuración funcional: Uso de funciones provider en lugar de módulos
• Mejor performance: Menor bundle size y tiempo de arranque

Diferencias con la configuración legacy

Comparación entre el enfoque tradicional y standalone:

Enfoque tradicional (NgModules):

// app.module.ts (NO recomendado en Angular 20)
@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Enfoque standalone (recomendado):

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes)
  ]
};

Configuración adicional del router

La función provideRouter() también acepta configuraciones adicionales como segundo parámetro:

// app.config.ts
import { provideRouter, withEnabledBlockingInitialNavigation } from '@angular/router';

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

Esta configuración funcional permite agregar características específicas del router de forma modular y declarativa, manteniendo la aplicación ligera al incluir solo las funcionalidades necesarias.