Como agregar alias a tus rutas y dejar tus importaciones limpias sin morir en el intento.
Como pre-requisito para este tutorial debes tener creado un proyecto Angular. Si no tienes uno, te dejo el LINK de otro tutorial que tengo en donde explico paso a paso como crear uno.
Cuando creamos de 0 nuestro proyecto Angular empezamos a realizar importaciones de todos nuestros archivos: componentes, servicios, pipes, interceptors, clases, interfaces, etc … Estos archivos se van creando mediante nuestro proyecto esta avanzando y es muy común tener estas rutas relativas:
Y cuando el proyecto empieza a crecer, todas estas rutas se empiezan a ver sucias y a la larga se vuelven insostenibles.
A continuación te mostrare una forma muy sencilla de cómo utilizar Path Aliasing en tus imports y poder dejar tus importaciones ordenadas y sencillas de leer.
Lo primero que tenemos que hacer es ir al archivo tsconfig.json que se encuentra en la raíz de nuestro proyecto.
Recordar que este archivo se crea al momento de ejecutar ng new {tu-proyecto}. Angular CLI lo crea por defecto.
Debajo del apartado en donde dice “baseUrl”: “/”,
agregamos un objeto llamado paths y añadimos los alias a nuestras rutas con el siguiente formato:
"paths": {
"@src/*": ["src/*"],
"@app/*": ["src/app/*"],
"@shared/*": ["src/app/shared/*"],
"@views/*": ["src/app/views/*"]
},En este caso tenemos 4 tipos de paths:
“@src/*”: Encapsula todas las rutas que se encuentran dentro de la carpeta src.
“@app/*”: Encapsula todas las rutas que se encuentran dentro de la carpeta app.
“@shared/*”: Encapsula todas las rutas que se encuentran dentro de la carpeta shared, según las buenas practicas, esta carpeta tiene los componentes y archivos que se compartirán dentro del proyecto.
“@views/*”: Encapsula todas las rutas que se encuentran dentro de la carpeta views, según las buenas practicas, esta carpeta tiene los componentes y archivos que serán nuestras vistas dentro del proyecto.
Si tienes creado otra carpeta con archivos específicos para esa tarea especifica, puedes agregarla en el JSON path y renombrar con el nombre de la carpeta para tenerlo con su propio alias.
Al tener listo nuestro JSON con loas alias nuevos, procederemos a renombrar todas nuestras importaciones a estos nuevos nombres.
Como dato, te recomiendo que al terminar de configurar el archivo tsconfig.json con tus nuevos alias, reinicies tu IDE de preferencia, al modificar este archivo no siempre se guardan los cambios.
Quedando de la siguiente manera.
Esto se considera una muy buena practica al momento de armar tu proyecto frontend. La idea es que a medida vayas creando tus componentes, vayas agregando alias a tus importaciones. Créeme que al final se vera mucho mas limpio y claramente ordenado 😃
Muchas gracias por llegar hasta acá y muy agradecido que le pongas “CLAPS” a mis publicaciones, y claro se agradece el feedback
