Custom Path tsconfig.json TypeScript

Cuando un proyecto crece y tenemos muchas carpetas, las rutas se ven super largas, y la verdad no se ve muy llamativo, para esto podemos customizar nuestras rutas en el archivo tsconfig.json, antes de ellos miremos los siguientes casos:

import { NavRoute } from '../../../../nav-routing';
import { NavigationService } from '../../../services/navigation/navigation.service';

import { Feacture} from '../../../../../../core/service/interfaces/feacture';

Las rutas son engorrosas verdad, quien no ha visto esto en sus proyectos 😱

Path mapping al rescate

TypeScript permite el uso de la asignación de ruta que permite especificar rutas de módulo arbitrarias (que no comienzan con "/" o ".") Y asignarlas a rutas físicas en el sistema de archivos en las opciones del compilador en el archivo tsconfig como se muestra a continuación:

...
"compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@demo/app/*": [
        "app/*"
      ],
      "@demo/core/*": [
        "app/core/*"
      ],
      "@demo/auth/*": [
        "app/auth/*"
      ],
      "@demo/components/*": [
        "app/core/components/*"
      ],
      "@demo/pages/*": [
        "app/page/*"
      ],
      "@demo/services/*": [
        "app/core/services/*"
      ],
    },
...

La primera propiedad que debemos agregar es baseUrl. Fíjense que las rutas se resuelven en relación con baseUrl.
La segunda propiedad es paths, esto le indica al compilador que cualquier módulo de importación que coincida por ejemplo, con el patrón "@demo/app/*", busque en esa ubicación.

Ojo chicos la idea de personalizar nuestras rutas es evitar esas enormes rutas engorrosas y tener más legibilidad de "que es lo que estamos importando"; recuerden que aunque hayan personalizado las rutas también pueden seguir usando las rutas relativas, las pueden combinar si desean.

Datos extras 😎

Si estas usando Visual Studio Code hay que realizar unos ajustes para que el Auto Import reconozca nuestras rutas, vayan a Setting, luego escojan la opcion "Open Setting JSON" y agregan lo siguiente

 "typescript.preferences.importModuleSpecifier": "non-relative"

Y eso es todo por hoy amigos, espero que esta información les ayude, aquí les dejo un repositorio en GitHub con las configuraciones que hemos visto https://github.com/jimmyhdolores/demo-custom-patch-angular.git

Si tienen alguna duda o consulta me escriben, no hay problema 🤗
Sigueme en Github https://github.com/jimyhdolores