Compodoc – Documentation tool for angular application

Hi,

In this post thought to share one of the tools which I use always for keeping my angular app document ready as well. You must have worked with other frameworks where in it can read your API comments and generate proper documentation out of the box. In case of angular, this feature comes live with the help of https://github.com/compodoc/compodoc. This is open source project with really cool themes to suit your need. Either you can install this tool globally and use the same in the project or you can have the same locally installed.

I have installed the project as dev dependency locally as shown below

After that, I have also written custom script for my project say like

First command is to scan the project and then to generate the document folder in the repository. Therefore, when I run npm run comp-gen. This will produce following output.

And once the same gets generated successfully, you can see in source code, it has generated one new folder like shown below.

Make sure to have .gitignore entry, else it will create hell lot of files for checkin.

Now, If I go ahead and run the command npm run comp-serve. This will launch on port 5555.

Therefore, If I now navigate to http://localhost:5555/, it will produce below result.

Here, you can explore all your angular stuffs like shown below

From here as well, you can navigate to code and DOM tree as well.

With this I would like to conclude this article. Hope you would have liked this tool for documenting your project properly.

Thanks,
Rahul Sahay
Happy Coding

586 total views, 1 views today