Última actualización: 28 julio, 2022Seguimos aprendiendo sobre routing desde cero. En esta 5ª parte nos adentramos en el mundo de las rutas anidadas (en inglés, nested routes). Si te la perdiste, aquí tienes la 4ª parte.
Cómo configurar rutas hijas (nested routes)
Sería más útil si mostrásemos un servidor o un usuario a la derecha de la lista de servidores y usuarios, en lugar de abrir una página nueva para cada uno, perdiendo la lista de la vista. Algo así:
Podemos conseguir esto configurando rutas hijas (en inglés, nested routes o child routes). 
Además, si te fijas, nuestro appRoutes del AppModule tiene varios elementos repetidos, demasiados servers y users por ahí. Esto tiene pinta de que podría simplificarse.
Empezamos con servers, quedándonos con la ruta principal (servers) y conviertiendo los dos posteriores en child routes de la principal.
1. En servers, añadimos otra propiedad llamada children, que será un array de rutas hijas.
2. Cogemos las dos rutas posteriores (servers/:id y servers/:id/edit) y las colocamos dentro del array.
3. Eliminamos la parte de servers porque la ruta principal ya nos da esa información.
{ path: 'servers', component: ServersComponent, children: [
{ path: ':id/edit', component: EditServerComponent },
{ path: ':id', component: ServerComponent }
]
},
De esta manera conseguimos agrupar todas las rutas relacionadas con servers, lo que nos deja un código más limpio y ordenado.
El problema viene en que ahora Angular no sabe dónde cargar el ServerComponent. Por eso, si guardas y vas al navegador, verás que la app no responde cuando haces clic en algún servidor de la lista. Puede que la consola te de un error indicándote que no puede encontrar el router-outlet para mostrarlo en tu navegador. En mi caso no me dice nada. Vamos, que me busque la vida 
. Menos mal que Max explica perfectamente lo que está pasando en su curso de Angular.
La razón por la que no puede encontrar el router-outlet es porque el único router-outlet de nuestra app está en el app.component.html, pero ese elemento únicamente mostrará las rutas de un nivel superior, no las rutas hijas. He ahí el quid de la cuestión.
Es decir, que las child routes necesitan un outlet independiente, porque cuando una ruta se convierte en "ruta madre", necesita ofrecer a sus rutas hijas un punto al que engancharse, y eso es el outlet.
4. Para eso, vamos al servers.component.html y reemplazamos la parte donde cargamos el EditServerComponent y el ServerComponent por el router-outlet, tan sencillo como eso.
5. Eliminamos también el button.
¡Y listo!
Hagamos lo mismo para las rutas de los users.
6. En el AppModule, convertimos las rutas normales en nested routes, aunque sólo hay una que convertir en este caso.
{ path: 'users', component: UsersComponent, children: [
{ path: ':id/:name', component: UserComponent },
]
},
7. En el users.component.html, sustituimos el custom element <app-user> por el router-outlet.
¡Y ya está!
CONTENIDO RESTRINGIDO
El resto del contenido es sólo para miembros del Club ACTech. Puedes unirte aquí o iniciar sesión si ya eres miembro.
THE END!
¡Y con esto terminamos esta 5ª parte de la Routing saga! Espero que hayas aprendido algo nuevo 
. Si te queda alguna duda, ¡nos vemos en los comentarios! Y si quieres seguir aprendiendo, aquí tienes la parte #6.
Sobre la autora de este post
Soy Rocío, una abogada reconvertida en programadora. Soy una apasionada de aprender cosas nuevas y ferviente defensora de que la única manera de ser feliz es alcanzando un equilibrio entre lo que te encanta hacer y lo que te saque de pobre. Mi historia completa, aquí.
Más recursos de aprendizaje
En mi experiencia, la manera más eficaz para aprender Angular es combinando varias vías de aprendizaje. Uno de mis métodos favoritos son los vídeo-cursos y mi plataforma predilecta para eso es Udemy. He hecho varios cursos pero sólo recomiendo aquellos que verdaderamente me han sido útiles. Aquí van:
Si necesitas apoyo en forma de libro, puede que éstos te sirvan de ayuda:
La programación es un mundo que evoluciona a una velocidad de vértigo. Los autores de estos libros lo saben, por eso suelen encargarse de actualizar su contenido regularmente. Asegúrate de que así sea antes de adquirirlos 
.
Participo en el programa de afiliados de Udemy y Amazon, lo que significa que, si compras alguno de estos cursos y/o libros, yo me llevaré una pequeña comisión y a ti no costará nada extra. Vamos, lo que se dice un win-win 
.
Otros artículos que pueden interesarte