Definiendo rutas relativas en el tsconfig

En nuestros proyectos solemos crear servicios, componentes, directivas etc. que importamos en distintas partes de nuestra aplicación, como por ejemplo módulos por medio de la directiva "import"

Supongamos por ejemplo que tenemos la siguiente estructura de ficheros:

Por otra parte supongamos que dentro de la carpeta "components" tenemos los directorios:

"seguridad"
"aplicacion"
..
etc.

A la hora de hacer un "import" de un componente, nos quedaría algo parecido a lo siguiente:

import { MiComponente} from './core/components/seguridad/micomponente';

Si dentro del directorio "seguridad" tenemos otro(s) directorios la cosa se empieza a "complicar"

Podemos evitar esta situación si definimos rutas relativas dentro del fichero de configuración "tsconfig.json"

Para ello, en primer lugar tenemos que indicar cual es nuestra ruta raiz, y eso lo hacemos indicando la propiedad "baseUrl". Por otra parte, tenemos que definir como queremos indentificar nuestros "path"

Podemos verlo mejor en el siguiente ejemplo:

    "baseUrl": "src",
    "paths": {
      "@services/*": ["app/core/services/*"]      
    }

De esta manera, cuando queremos importar un modulo llamado "Seguridad" que tenemos dentro de ./core/services/seguridad lo haremos de la siguiente manera:

import { Seguridad } from '@services/seguridad';

Esto es una forma muy interesante de organizar nuestros elementos y no tener intrucciones de importaciones excesivamente largas.

Hasta la próxima entrada :-)