Comment générer automatiquement la documentation Angular en utilisant Compodoc ?

Une des tâches que chaque développeur déteste est la documentation. Nous savons qu'elle est très importante et pourrait être utile à l'avenir, mais c'est une tâche fastidieuse.

La documentation est une autre partie du développement, tout comme le recrutement, le développement, l'assurance qualité, etc. Documenter notre application aide à intégrer de nouveaux coéquipiers, à résoudre les problèmes futurs et à mieux comprendre le projet. Dans cet article, nous allons découvrir ce qu'est Compodoc, ses principales fonctionnalités, comment le configurer et plus encore.

1. Qu'est-ce que Compodoc ?

Compodoc est un outil de documentation pour les applications Angular. Il génère automatiquement une documentation statique de votre application. Une fois configuré, vous n'avez plus rien à faire.

Compodoc prend en charge Angular, NestJS et Stencil, propose 8 thèmes avec un mode sombre intégré, supporte 12 langues et offre bien d'autres fonctionnalités.

2. Installation et configuration

L'installation est facile ; il suffit d'exécuter la commande suivante :

Angular CLI :

ng add @compodoc/compodoc

ou NPM :

npm install -g @compodoc/compodoc

Cette commande créera un fichier tsconfig.doc.json. Dans ce fichier, nous devons décider quelles parties de notre application nous voulons inclure ou exclure.

{
  "include": ["src/**/*.ts"],
  "exclude": ["src/test.ts", "src/**/*.spec.ts", "src/app/file-to-exclude.ts"]
}

Nous pouvons également ajouter quelques scripts pour exécuter notre documentation :

"compodoc:build": "compodoc -p tsconfig.doc.json",
"compodoc:build-and-serve": "compodoc -p tsconfig.doc.json -s",
"compodoc:serve": "compodoc -s"

3. Les résultats

Une fois que nous avons installé et configuré notre projet, tout est prêt. Nous avons juste besoin d'exécuter le script de service et de voir ce que Compodoc construit. Jetons un coup d'œil à quelques exemples :

Dans l'aperçu du projet, nous avons un menu latéral avec tous nos modules, composants, classes, interfaces, etc.

Aperçu du routage

Nous avons une carte détaillée avec toutes nos routes.

Aperçu des composants

Informations détaillées sur chaque composant.

Couverture de la documentation

Pour connaître le pourcentage de ce qui a été documenté.

4. Conclusion
Nous venons de créer la documentation de notre projet en quelques étapes. Comme vous pouvez le constater, Compodoc est un excellent outil, entièrement automatisé pour créer la documentation de votre projet. Nous n'avons vu que quelques fonctionnalités, mais Compodoc en offre beaucoup plus. Nous en parlerons davantage dans les prochains articles.

J'ai joint la page officielle ci-dessous.

Découvrez la page officielle de Compodoc !