Tutorial Angular: 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. 

Conceptos fundamentales de las rutas en Angular 17

Generalmente, en aplicaciones Angular más grandes, se utilizan módulos para organizar el código relacionado en bloques funcionales y se definen rutas específicas del módulo dentro de esos módulos. 

En Angular 17, la configuración de rutas se ha simplificado gracias a la capacidad de definir rutas directamente en un archivo de configuración (app.routes.ts), sin la necesidad de un módulo de enrutamiento. 

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 utilizando el enfoque "standalone", que es el recomendado en Angular 17+. Luego, agregamos los componentes necesarios:

# Crear una nueva aplicación Angular standalone sin SSR
ng new routing-app --standalone --ssr=false

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

# Generar componentes standalone
ng generate component home --standalone
ng generate component not-found --standalone
ng generate component restaurant-list --standalone
ng generate component restaurant-detail --standalone
ng generate component restaurant-form --standalone

La bandera --standalone en cada comando de generación de componente asegura que se creen como componentes independientes, siguiendo las mejores prácticas de Angular 17+.

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 guardias de ruta.

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'
  }
];

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:

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