Generate documentation for your Angular App in just 5 simple steps

Hello everyone 👋,

In this article, we are going to see how to generate the documentation for your Angular Application in just 5 simple steps.

Yes, it's real!

Without any delay, let's gooo!

Steps

Install compodoc as dev dependency with the below command.

npm install --save-dev @compodoc/compodoc

Create tsconfig.doc.json in the root directory where you have the package.json file. Paste the below content to that file.

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

Create a script in the package.json file to generate documentation.

"scripts": {
  "compodoc": "npx compodoc -p tsconfig.doc.json"
}

Now open your terminal and run the below command to generate the documentation. This command will generate the documentation in a new directory as documentation in the project root path.

npm run compodoc

To see the documentation, use http-server or any other npm package to serve the server for the documentation directory. I'm using http-server in this method. To use that, you should first install it by npm install --global http-server.

Then, run the below command to serve the files.

http-server documentation/

Once the command runs successfully, open http://localhost:8080/ to see the documentation for your Angular app.

That's it, Yes!

Here are the screenshots of the documentation created by compodoc.

In the overview section, you can see the number of modules, routes, services, guards, and the structure of the application.

Screenshot 2021-07-18 at 8.05.01 PM.png

You can see the services, components declare, the module imported for each module.

Screenshot 2021-07-18 at 8.07.50 PM.png

Also, the respective components are grouped under its module. See the left-hand side. Additionally, you can view the metadata of the component, methods, properties etc..

Screenshot 2021-07-18 at 8.09.21 PM.png