Angular : Transformer ses chemins relatifs en chemin absolus

14 août 2021 clemdesign

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 ! xD

Crédits

Angular Workspace configuration
TS Config Reference
Import via Absolute Paths in Angular

Article précédent Article suivant

Ajouter un commentaire