Configuración de rutas en Angular con loadComponent y redirecciones

Configura el enrutado en Angular con precisión: define URLs claras, carga componentes con loadComponent, aplica redirecciones para errores y valida todo en localhost:4200 usando npm start. Se establecen las rutas /auth y /chat, se ajusta el title del navegador y se prepara el terreno para un guard que limitará el acceso a chat.

¿Cómo configurar rutas con loadComponent en Angular 20?

La base está en la carpeta source/app, dentro del archivo de app routes. Allí verás un array de rutas. Cada ruta es un objeto con path, loadComponent y, opcionalmente, title. La carga del componente se hace con una función tipo arrow y un import dinámico.

export const routes = [
  {
    path: 'auth',
    loadComponent: () => import('components/auth/auth').then(m => m.auth),
    title: 'Iniciar sesión | Chat asistente'
  },
  {
    path: 'chat',
    loadComponent: () => import('components/chat/chat').then(m => m.chat),
    title: 'Chat asistente'
  },
  { path: '', redirectTo: 'auth', pathMatch: 'full' },
  { path: '**', redirectTo: 'auth' }
];

• Usa path con 'auth' y 'chat'.
• Emplea loadComponent con import dinámico y arrow function.
• En Angular 20 ya no se usa el sufijo Component: se exporta y se referencia como auth o chat.

¿Qué estructura de archivos y exports necesitas?

En components/auth existe el archivo TS que exporta la clase auth. La ruta de import corresponde a components/auth/auth y lo exportado se consume como auth. Lo mismo aplica para components/chat/chat con el export chat. En el generador verás una M que indica módulo al cargar, y dentro de ese módulo se exporta lo que necesitas.

• Carpeta source/app con app routes.
• Carpeta components/auth con el export auth.
• Carpeta components/chat con el export chat.
• Import dinámico apuntando a components/auth/auth y components/chat/chat.

¿Cómo definir el título de la página?

Agrega la propiedad title en cada ruta para cambiar el texto de la barra del navegador. Por ejemplo, “Iniciar sesión” o “Chat asistente”. Puedes personalizarlo libremente.

{
  path: 'auth',
  loadComponent: () => import('components/auth/auth').then(m => m.auth),
  title: 'Iniciar sesión | Chat asistente'
}

• Mejora la claridad del flujo.
• Facilita la navegación del usuario.
• Permite ajustar branding y mensajes.

¿Cómo manejar redirecciones y errores de ruta?

Se cubren dos casos: cuando no se escribe nada en la URL y cuando se escribe algo erróneo. En ambos se redirige a auth. Además, se usa pathMatch para coincidir completamente con el path vacío.

{ path: '', redirectTo: 'auth', pathMatch: 'full' },
{ path: '**', redirectTo: 'auth' }

• Vacío redirige a auth.
• Auth navega a auth.
• Chat navega a chat.
• Cualquier otra cosa redirige a auth.

Esta URL de chat estará protegida con un guard más adelante. Por ahora queda abierta para desarrollar sin bloqueo.

¿Cómo levantar y probar con npm start y ng serve?

Ejecuta npm start. Internamente llama a ng serve desde el package.json. La app se levanta en localhost:4200. Verás “Auth works” porque el path base está vacío y redirige a auth. Si navegas a /chat, verás “chat works”.

• Corre npm start desde la raíz del proyecto.
• Abre localhost:4200 en el navegador.
• Prueba /auth, /chat y rutas inválidas.
• Verifica las redirecciones a auth.

¿Agregarías más rutas o un título distinto para cada pantalla? Comparte ideas y dudas en los comentarios.