Dokumentowanie aplikacji Angular poprzez Compodoc

Zapewne znasz ten ból – dołączasz do nowego projektu, a przez pierwsze dni lub nawet tygodnie, przeklikujesz się przez widoki, sprawdzasz dostępne komponenty, interfejsy, poznajesz architekturę. W takiej sytuacji bardzo pomocna może być dokumentacja, dzięki której szybko przybijemy sobie piątkę z projektem i powiemy głośno – znam Cię!

Dzisiaj krótki wpis o narzędziu Compodoc – generatorze dokumentacji, która wygląda naprawdę pięknie. A co najlepsze, nie musimy nic dopisywać do kodu. Wbijamy na świeżaka do nowego projektu i ją po prostu generujemy 🙂

Compodoc

Rozpoczynamy od globalnej instalacji Compdoca:

npm install -g @compodoc/compodoc

Dodajemy skrypt do package.json w projekcie:

"scripts": {
  "compodoc": "npx compodoc -p src/tsconfig.app.json"
}

Generacja dokumentacji:

npm run compodoc

Tadam! Dokumentacja gotowa. Przechodzimy do katalogu documentation, który utworzył się w root directory (główny folder aplikacji) i odpalamy index.html.

Dla prostej aplikacji, wygląda to następująco:

Jak widać, możemy szybko zapoznać się między innymi z:

• podziałem modułów
• interfejsami w aplikacjami
• całym drzewem routingu
• listą komponentów, dyrektyw, serwisów

Niektóre zalety:

• kompatybilność z jsdoc
• możliwość stylowania dokumentacji
• możliwość dodawania dodatkowej dokumentacji na podstawie plików JSON z odpowiednią strukturą
• wyszukiwarka!

Cała dokumentacja:
https://compodoc.app/guides/getting-started.html