DEV Community

Cover image for Generate documentation for your Angular App in just 5 simple steps
Yuvaraj
Yuvaraj

Posted on β€’ Originally published at yuvaraj.hashnode.dev

14 4

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.

really.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
Enter fullscreen mode Exit fullscreen mode
  • 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"]
}
Enter fullscreen mode Exit fullscreen mode
  • Create a script in the package.json file to generate documentation.
"scripts": {
  "compodoc": "npx compodoc -p tsconfig.doc.json"
}
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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/
Enter fullscreen mode Exit fullscreen mode

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

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

Screenshot 2021-07-18 at 8.09.28 PM.png

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

Screenshot 2021-07-18 at 8.09.36 PM.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 & Github πŸ™‚

Support πŸ™Œ

You can support me by buying me a coffee with the below link πŸ‘‡

Buy Me a Coffee

Tiugo image

Modular, Fast, and Built for Developers

CKEditor 5 gives you full control over your editing experience. A modular architecture means you get high performance, fewer re-renders and a setup that scales with your needs.

Start now

Top comments (1)

Collapse
 
yoanasdrubal profile image
yoan-asdrubal β€’

Hi Yuvaraj. great article. I used compodoc in my project. but I would like to try something like angular.io documentation suggest in angular.io/guide/docs-style-guide#... , using code-example or code-tabs, but I don't understand how can I generate that documentation. Can you help me? thanks.

Jetbrains image

Is Your CI/CD Server a Prime Target for Attack?

57% of organizations have suffered from a security incident related to DevOps toolchain exposures. It makes senseβ€”CI/CD servers have access to source code, a highly valuable asset. Is yours secure? Check out nine practical tips to protect your CI/CD.

Learn more

πŸ‘‹ Kindness is contagious

Dive into this thoughtful article, cherished within the supportive DEV Community. Coders of every background are encouraged to share and grow our collective expertise.

A genuine "thank you" can brighten someone’s dayβ€”drop your appreciation in the comments below!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found value here? A quick thank you to the author makes a big difference.

Okay