Utilisation de Graphviz pour tracer un graph de dépendance

Pour un vrai graphe de dépendances (fichiers / modules) on peux utiliser un outil de type dependency-cruiser, qui génère un graphe à partir des imports TypeScript et peut afficher les cycles.

Installation

  1. Installe dans le projet :
    npm install --save-dev dependency-cruiser
  2. Ajoute un script dans ton package.json :
    {
      "scripts": {
        "dep-graph": "depcruise --include-only \"^src\" --output-type dot src | dot -T svg > dependency-graph.svg"
      }
    }
  3. Installation graphviz sur le poste (version windows) https://graphviz.org/download/
  4. Ajouter le path via powershell (vérifier le chemin d'install)
    [Environment]::SetEnvironmentVariable("Path", $env:Path + ";C:\Program Files (x86)\Graphviz\bin", "User")
  5. Relancer l'éditeur de code
  6. Gérer le fichier de paramétrage en console (tout par défaut)
    npx dependency-cruiser --init

Générer le graph

  • dans la console pour générer une image svg
    npm run dep-graph
  • dans la console pour voir les dépendances
    npm run dep-graph --circular
  • dans la console pour voir les dépendances partielles
    npx depcruise src\app\Fichier\Annuaire\annuaire.component.ts --output-type dot | dot -T svg > dep-mon-fichier.svg  
  • dans console recherche de boucle dans un dossier
    npx depcruise src/app/Fichier