Generate documentation for your Angular application with Compodoc

Generate documentation for your Angular application with Compodoc

How to automatically generate Angular documentation using Compodoc

One of the tasks that every developer hates is documenting. We know that it is very important and could be helpful in the future, but it's a tedious task.

Documentation is another part of development, the same as taking the recruitment, development, QA, etc. Documenting our application helps with onboarding new teammates, fixing future issues and better understanding the project. In this article, we will learn about what Compodoc is, its main features, how to set it up and more.

What is Compodoc?

Compodoc is a documentation tool for Angular applications. It generates static documentation of your application automatically. Once it is configured, you don't have to do anything more.

Compodoc has support for Angular, NestJS, and Stencil, 8 themes with integrated dark mode, support for 12 languages, and many more features.

Installation and configure

The installation is easy; we just run the following command:

Angular CLI:

ng add @compodoc/compodoc

or NPM:

npm install -g @compodoc/compodoc

This command will create a tsconfig.doc.json file. In this file, we have to decide which parts of our application we want to include or exclude.

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

Also, we can add a few scripts to execute our documentation:

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

The results

Once we have installed and configured our project, everything is done. We just need to run the serve script and see what Compodoc builds. Let's take a look at a few examples:

Screenshot of the SoundCloud-ngrx documentation overview page. The left sidebar contains navigation links such as README, CHANGELOG, LICENSE, and various sections like Modules, Components, Classes, and more. The main section displays a diagram of the application structure with components and modules interconnected, and buttons for zooming in, resetting, and zooming out. Below the diagram, there are icons indicating the number of Modules, Components, Injectables, Pipes, Classes, and Interfaces.

In the project overview, we have a sidebar menu with all of our modules, components, classes, interfaces, etc.

A screenshot of the coding frontend documentation generated using Compodoc. The left sidebar includes sections like Getting started, Modules, Components, Classes, Injectables, Interfaces, Pipes, Routes, Miscellaneous, and Documentation coverage. The main content shows a detailed routing module tree diagram with various routes and components, such as AppRoutingModule, FightRoutingModule, HomeRoutingModule, and StartRoutingModule, along with their respective paths and components.

Routing overview, we have a detailed map with all of our routes.

A screenshot of a documentation page for the "IconButtonComponent" in a software project. The page includes a navigation menu on the left and details about the component on the right, such as file path, metadata, and a code snippet for the button template.

Component overview, detailed information of each component.

A screenshot of a documentation coverage report generated using Compodoc. The report shows a list of files with their types, identifiers, and documentation coverage percentages. The coverage is color-coded: green for high coverage, yellow for partial coverage, and red for no coverage. The overall documentation coverage is 1%. The sidebar on the left includes sections like Overview, README, CHANGELOG, LICENSE, Dependencies, Modules, Components, Classes, Injectables, Interfaces, Pipes, Miscellaneous, Routes, and Documentation coverage.

Documentation coverage to have the knowledge of which percentage we have documented.


We just built our project documentation in a few steps. Compodoc, as you can see, is a great tool, fully automated to create your project documentation. We only saw a few features, but Compodoc has a lot more. We will talk more about Compodoc in the next articles.

I have attached the official page below.

Did you find this article valuable?

Support Rubén Peregrina by becoming a sponsor. Any amount is appreciated!