DEV Community

Cover image for Générer des documentations pour une application Angular, Nest JS, Vue JS, Node JS
Marwen Ben Ahmed
Marwen Ben Ahmed

Posted on

Générer des documentations pour une application Angular, Nest JS, Vue JS, Node JS

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
Enter fullscreen mode Exit fullscreen mode

ou NPM :

npm install -g @compodoc/compodoc
Enter fullscreen mode Exit fullscreen mode

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"]
}
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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 :

Image description

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 !

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay