February 5, 2026
Crear alias path de nuestras rutas
TypeScript
Descripción (meta description para Google)
Aprende a crear alias de rutas en TypeScript y Angular usando tsconfig.json para evitar imports largos, mejorar la legibilidad del código y mantener una arquitectura más limpia y escalable.
Crear alias path de nuestras rutas
A medida que un proyecto crece, las rutas relativas empiezan a convertirse en uno de los mayores enemigos de la legibilidad del código. Imports como ../../../../services/user.service no solo son feos, sino que también hacen el mantenimiento mucho más complicado.
Una solución simple y muy efectiva es usar alias de rutas (path aliases). Con ellos podemos definir nombres semánticos para nuestras carpetas y usarlos en cualquier import del proyecto.
El problema de las rutas relativas
Imagina este escenario típico en Angular o TypeScript:
import { UserService } from '../../../../services/user.service';
import { AuthGuard } from '../../../guards/auth.guard';Problemas claros:
- Difícil de leer
- Frágil ante refactors (mover un archivo rompe imports)
- No aporta contexto semántico
La idea es poder escribir algo como:
import { UserService } from '@services/user.service';
import { AuthGuard } from '@guards/auth.guard';Configuración de alias en tsconfig.json
Todo empieza en el fichero tsconfig.json (o tsconfig.base.json en algunos proyectos).
{
"compilerOptions": {
"baseUrl": "./", // Punto base desde el que se resolverán los alias
"paths": {
"@components/*": ["src/app/components/*"],
"@services/*": ["src/app/services/*"],
"@types/*": ["src/app/types/*"]
}
}
}Qué está pasando aquí
baseUrl
Define la raíz desde la que TypeScript resolverá los alias.
baseUrl = "./" // raíz del proyectopaths
Es un mapa de alias → rutas reales.
Ejemplo mental tipo debugger:
// Import que escribimos
import { UserService } from '@services/user.service';
// TypeScript lo resuelve internamente como:
import { UserService } from 'src/app/services/user.service';Usando los alias en el código
Una vez configurado, puedes usarlos directamente en tus imports:
import { HeaderComponent } from '@components/header/header.component';
import { ApiService } from '@services/api.service';
import { User } from '@types/user';Resultado:
- Imports mucho más cortos
- Código más limpio
- Mejor experiencia de desarrollo
Angular: detalle importante
Si estás usando Angular, normalmente no necesitas configuración adicional, ya que el CLI respeta el tsconfig.json.
Eso sí, asegúrate de que:
- El archivo que modificas es el que realmente usa el proyecto (
tsconfig.app.json,tsconfig.base.json, etc.).
- Reinicias el servidor (
ng serve) tras cambiar los alias.
Compatibilidad con herramientas
Algunas herramientas necesitan configuración extra:
Jest
moduleNameMapper: {
'^@services/(.*)$': '<rootDir>/src/app/services/$1',
}Vite / Webpack
resolve: {
alias: {
'@services': path.resolve(__dirname, 'src/app/services'),
}
}Esto es importante para evitar errores del tipo module not found en tests o builds.
Buenas prácticas al definir alias
- Usa nombres semánticos (
@services,@components,@shared)
- Evita alias demasiado genéricos (
@app)
- Mantén una convención clara en todo el equipo
- No abuses: pocos alias bien definidos > muchos alias caóticos
Los alias de rutas son una mejora pequeña pero con un impacto enorme en proyectos medianos y grandes. Reducen ruido visual, facilitan refactors y hacen que el código se lea casi como documentación.
Si aún estás peleándote con ../../../../, este es uno de esos cambios que merece la pena hacer cuanto antes.
Written by Pol Valle
I am particularly drawn to developing applications that are not only functional but also visually appealing and easy to use. I accomplish this by implementing SOLID principles and clean architecture, and applying testing to ensure quality.