Angular | Create Documentation of Angular Project in 20 Secs!

Yes! you read it right… with this simple tool, you can create a documentation of your Angular project automatically by simply running an NPM command in your CLI. This package creates complete project documentation in HTML format with an overview and detailed view of each component in the project.

As our application grows, it becomes difficult to keep track of each module and its components. The situation becomes worse when there is a need for giving project structure to co-team members or deliver code source and explain everything to other teams. During maintenance by other team members also slows down the debug or change processes.

So its always a better idea to keep a well maintained, simple and self-explanatory documentation at hand so that others and can understand and go through the structure with their own pace and conveniences.

Here we will get to know how to quickly create Angular project Documentation using an Awsome tool Compodoc.

Let’s create documentation of a dummy project…

First of all, we will create a new Angular Project using NG CLI tool and also add some new Components, Services, Directives, etc so that we can check how well Compodoc works!

Create a new project

Run the following command to create a new project with Routing and style option selected as CSS:

After creating application let’s create some components and services:

Run following generate commands:

After running above commands, our files structure will look like this in VS Code:

Install and Run Compodoc

Finally, we are ready to install and create documentation using Compodoc 🙂

Install Compodoc by running following NPM command:

Add compodoc script in package.json

Now open package.json file and add the following command under “scripts” in JSON object:


Note: Please make sure the location of file “tsconfig.app.json” is available in src folder. If not then you need to change above command to this:


 

Create Documentation

Now run following command to create documentation:

After running above command, we will have complete documentation under this folder “~documentation” at the root. It will have HTML files:

Let’s open “~documentation/index.html” file:

That’s it now you have good looking project documentation at hand with many features.

 

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of