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'm particularly drawn to building apps that are not only functional but also visually appealing and easy to use. I do it by applying SOLID principles, clean architecture and testing to ensure quality.