Generate documentation for your Angular App in just 5 simple steps
Tags: webdev, angular, documentation
Published: 2021-07-18 15:20:57

Hello everyone 👋,

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


![really.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1626617943865/HkODFTpAS.gif)

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](https://www.npmjs.com/package/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](https://cdn.hashnode.com/res/hashnode/image/upload/v1626618958449/-zkgDFHrf.png)

You can see the services, components declare, the module imported for each module. 
 
![Screenshot 2021-07-18 at 8.07.50 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626619084966/mFpjKss5X.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1626619190587/nuVImby3r.png)

The source of the component also can be viewed under the **source** tab.

![Screenshot 2021-07-18 at 8.09.28 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626619199170/yWwVaf6Pn.png)

The source of the template also can be viewed under the **template** tab.

![Screenshot 2021-07-18 at 8.09.36 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626619206976/a5KJOg0Ll.png)

And much more!

Learn more from here https://compodoc.app/guides/getting-started.html

I hope you enjoyed this article or found it helpful. 

You can connect with me on [Twitter](https://twitter.com/yuvgeek) & [Github](https://github.com/yuvgeek) 🙂

###  Support 🙌 

You can support me by buying me a coffee with the below link 👇

<a href="https://www.buymeacoffee.com/yuvgeek">Buy Me a Coffee</a>