Routes sin módulos en Angular

Las Routes sin módulos se refieren a la definición de rutas en una aplicación Angular sin encapsular estas rutas dentro de un módulo específico de Angular.

En Angular 21, este enfoque standalone es el predeterminado. Todas las aplicaciones nuevas creadas con Angular CLI utilizan componentes standalone y configuran las rutas directamente en app.routes.ts.

Enfoque standalone como estándar en Angular 21

En versiones anteriores de Angular, era necesario crear módulos de enrutamiento (AppRoutingModule) con RouterModule.forRoot() y RouterModule.forChild(). En Angular 21, la configuración de rutas se ha simplificado completamente gracias a la capacidad de definir rutas directamente en un archivo de configuración (app.routes.ts), registrarlas con provideRouter() en app.config.ts, y utilizar componentes standalone que declaran explícitamente sus dependencias.

Esta aproximación reduce la complejidad y mejora la legibilidad del código. Las rutas son esenciales para cualquier aplicación de página única (SPA), ya que permiten la navegación entre diferentes componentes sin recargar la página.

Ejemplo práctico: Configuración de rutas

Vamos a definir un conjunto de rutas para una aplicación de ejemplo que incluye:

• una página de inicio (Home)
• una página de "No Encontrado" (Not Found)
• un listado (List)
• detalles de un elemento (Detail)
• formulario para crear y editar (Form)

También incluiremos una ruta comodín (**) para capturar cualquier URL no declarada.

Paso 1: Generación de la aplicación y componentes

Para comenzar, generamos una nueva aplicación con Angular CLI. En Angular 21, las aplicaciones se crean como standalone por defecto:

# Crear una nueva aplicación Angular (standalone por defecto)
ng new routing-app --ssr=false

# Navegar al directorio de la aplicación
cd routing-app

# Generar componentes (standalone por defecto en Angular 21)
ng generate component home
ng generate component not-found
ng generate component restaurant-list
ng generate component restaurant-detail
ng generate component restaurant-form

En Angular 21 ya no es necesario especificar --standalone porque todos los componentes se crean como componentes standalone por defecto.

Paso 2: Definición de rutas en app.routes.ts

Las rutas se configuran utilizando un array de objetos Route, que se exporta desde el archivo app.routes.ts. Cada objeto Route especifica como mínimo dos propiedades principales:

1. path: Una cadena que define la URL para esa ruta.
2. component: El componente que se debe mostrar cuando se accede a esa ruta.

Además, pueden incluirse otras propiedades opcionales como redirectTo, children para rutas anidadas, o canActivate para guards funcionales.

import { Routes } from '@angular/router';
import { RestaurantListComponent } from './restaurant-list/restaurant-list.component';
import { RestaurantFormComponent } from './restaurant-form/restaurant-form.component';
import { RestaurantDetailComponent } from './restaurant-detail/restaurant-detail.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { HomeComponent } from './home/home.component';

export const routes: Routes = [
{
    path: '', // Ruta vacía
    component: HomeComponent
  },
  {
    path: 'restaurantes',
    component: RestaurantListComponent
  },
  {
    path: 'restaurantes/nuevo',
    component: RestaurantFormComponent
  },
  {
    path: 'restaurantes/:id/detalle',
    component: RestaurantDetailComponent
  },
  {
    path: 'not-found-404',
    component: NotFoundComponent
  },
  {
    path: '**', // Ruta comodín que atrapa cualquier url que se escriba
    redirectTo: '/not-found-404'
  }
];

Estas rutas se registran automáticamente mediante provideRouter() en app.config.ts:

// 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)
  ]
};

Paso 3: Uso de router-outlet y routerLink

Una vez definidas las rutas de la aplicación Angular, el siguiente paso es integrarlas efectivamente para que los usuarios puedan navegar entre los distintos componentes que se han preparado. Este proceso se realiza en dos etapas principales: añadiendo enlaces de navegación y actualizando la plantilla del componente principal.

En el componente principal (AppComponent), utilizamos <router-outlet> para indicar dónde se deben renderizar los componentes de las rutas activas. Además, usamos routerLink para crear enlaces de navegación entre las diferentes rutas.

<!-- app.component.html -->
<h1>Aplicación de Restaurante</h1>
<nav>
    <ul>
        <li><a routerLink="/">Inicio</a></li>
        <li><a routerLink="/restaurantes">Listado de Restaurantes</a></li>
        <li><a routerLink="/restaurantes/nuevo">Añadir Restaurante</a></li>
    </ul>
</nav>
<router-outlet></router-outlet>

Este fragmento HTML configura un menú de navegación con enlaces a las páginas principales de la aplicación y utiliza <router-outlet> para mostrar el componente correspondiente según la ruta seleccionada. De esta manera, se proporciona a los usuarios una experiencia de navegación fluida y coherente, aprovechando las potentes características de enrutamiento que Angular ofrece.

Es imprescindible importar RouterOutlet y RouterLink en app.component.ts en imports:

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

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, RouterLink],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'routing-app';
}

Sin modificaciones de estilo y con el HTML básico veríamos lo siguiente en el navegador: