Français
English
Dans votre projet Angular, vous en avez marre des chemins relatifs de vos import, et souhaitez les transformer en chemin absolus (../../../components => components)? Il existe une solution simple et rapide à mettre en oeuvre. 
Bien souvent, on fait confiance à notre IDE, qui, en pratique, gère l'intégration des import pour nous. Mais lorsque le projet est lourd et qu'on doit refactoriser du code, on se rend vite compte que les import en chemin relatifs sont illisibles, et peuvent être compliqués à modifier.
Pour le TypeScript
En réalité, la solution fonctionne pour un projet Angular, mais aussi pour tous ceux qui utilisent TypeScript.
Dans le fichier tsconfig.json, ajoutez les lignes suivantes:
{
//...
"compilerOptions": {
"baseUrl": "./",
// ...
// ===> Code à rajouter
"paths": {
"@environments/*": ["./src/environments/*"],
"@components/*": ["./src/app/_components/*"],
// ...
}
}
// ...
}Ainsi, on peut transformer nos:
import {environment} from '../../../../environments/environment';
import {PasswordModule} from '../../../_components/password/password.module';En
import {environment} from '@environments/environment';
import {PasswordModule} '@components/password/password.module';Magnifique !
Pour le SCSS
Comme pour le TypeScript, la solution est assez simple, bien qu'elle soit propre à Angular. Ou du moins, il faudra faire des adaptations pour les autres projets (webpack, ...).
Dans angular.json, ajoutez les lignes suivantes:
// ...
"architect": {
"build": {
// ...
"options": {
// ...
// ===> Code à rajouter
"stylePreprocessorOptions": {
"includePaths": [
"src/theme"
]
}
// ...
}
}
}
}Ainsi, on peut transformer nos:
@import '../../../../theme/mixins';En
@import 'mixins';Doublement magnifique !
Conclusion
Configurer et utiliser des chemins absolus apporte plus de lisibilité et facilite la maintenance (refactoring par exemple) de votre projet.
J'espère que cet article vous a été utile, et je vous dis à plus pour le prochain ! 
Crédits
Angular Workspace configuration
TS Config Reference
Import via Absolute Paths in Angular
Add a comment