Última actualización: 23 febrero, 2023¡Seguimos con esta Routing Saga! Si acabas de aterrizar aquí, puedes consultar la parte anterior para ubicarte.
Cómo externalizar las rutas en un archivo a parte
Si nos fijamos en nuestro AppModule, vemos que la parte del routing ocupa mogollón de espacio. Como regla general, si tenemos más de un par de rutas, merece la pena moverlas a un archivo independiente y vincularlo al AppModule. Vamos a ello.
1. A la altura del AppModule, creamos un archivo (un módulo) para las rutas, normalmente llamado app-routing.module.ts. Aprendí todo sobre los módulos de Angular en este completísimo curso de Max.
2. Al módulo le añadimos el decorador ngModule.
import { NgModule } from "@angular/core";
@NgModule({})
export class AppRoutingModule { }
3. En el app.module.ts, borramos el RouterModule, cortamos la variable appRoutes y la pegamos después de los imports del app-routing.module.ts.
4. Importamos todos los componentes y paquetes necesitarios, tal y como estaban en el app.module.ts.
No debemos añadir un array de declarations, porque esos componentes ya están declarados en el app.module.ts.
5. Añadimos un array de imports en el ngModule, usamos el RouterModule con el método forRoot y le pasamos nuestras rutas (appRoutes).
Para poder usar las rutas de nuevo, debemos avisar al AppModule de que el archivo AppRoutingModule existe. Para eso tenemos el array de exports. Esta es la forma que Angular nos da para que podamos exponer este módulo (o las partes que queramos de él) a otros módulos, para así poder usarlo donde lo necesitemos.
En este caso, queremos exponer el RouterModule así que se lo indicamos en el array de exports.
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { HomeComponent } from "./home/home.component";
import { PageNotFoundComponent } from "./page-not-found/page-not-found.component";
import { EditServerComponent } from "./servers/edit-server/edit-server.component";
import { ServerComponent } from "./servers/server/server.component";
import { ServersComponent } from "./servers/servers.component";
import { UserComponent } from "./users/user/user.component";
import { UsersComponent } from "./users/users.component";
const appRoutes: Routes = [
{ path: 'users', component: UsersComponent, children: [
{ path: ':id/:name', component: UserComponent },
]
},
{ path: '', component: HomeComponent },
{ path: 'servers', component: ServersComponent, children: [
{ path: ':id/edit', component: EditServerComponent },
{ path: ':id', component: ServerComponent }
]
},
{ path: 'not-found', component: PageNotFoundComponent},
{ path: '**', redirectTo: '/not-found'}
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [RouterModule]
Con estos cambios, en el AppModule ya podemos importar nuestro archivo de rutas. Lo hacemos en el array de los imports.
imports: [
BrowserModule,
FormsModule,
AppRoutingModule
],
De esta manera, nuestra app funciona igual que antes, pero ahora el código está un poco más organizado ?.
Introducción a los Route Guards
Con este nombre tan molón digno de un reino de El señor de los anillos, los guardianes de rutas juegan un papel fundamental en el ecosistema del routing.
Los guardianes de rutas (en inglés, route guards) son configuraciones de código que podemos hacer antes de acceder a una ruta o una vez abandonamos una ruta.
Hagamos un ejemplo para entenderlo bien. Supongamos que sólo queremos que un usuario tenga acceso al componente Server y al componente EditServer si está "registrado" en nuestra app. Lo pongo entre comillas porque vamos a simular ese proceso de registro (en inglés, login).
Para eso, necesitaremos hacer esta comprobación antes de acceder a cualquier ruta relacionada con el ServerComponent o el EditServerComponent. Una opción poco eficiente de hacer esto sería de manera manual, en el ngOnInit de esos dos componentes. Además, tampoco sería escalable.
Debemos tomar otro camino, como es el usar una herramienta que viene incluída en el Router de Angular, que se encarga de ejecutar un código antes de que el componente se cargue: el canActive Guard. 
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 hasta aquí la parte #6 de esta completa guía sobre el Routing! 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 #7.
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