How to generate documentation in Angular Compodoc

Compodoc is a document generator for angular applications. It generates documentation for used components of an angular application.

It includes

Modules
Components
API and Services
Routes
Directives
Pipes
Model classes and interfaces

Documentation for

Angular Documentation Generator using compodoc toll

I have an angular application already created with a lot of pipes examples

let’s install compodoc to an existing application, First, Go to the application

npm i -g @compodoc/compodoc

Now, after installation, the compodoc command is available

A:\work\angular-pipe-examples>compodoc -p tsconfig.json

1.1.18

TypeScript version used by Compodoc : 4.5.5

TypeScript version of current project : 4.4.3

Node.js version : v14.17.0

Operating system : Windows 10

[10:03:28] No configuration file found, switching to CLI flags.
[10:03:28] Using tsconfig file : A:\work\angular-pipe-examples\tsconfig.json
[10:03:28] Including      : A:\work\angular-pipe-examples\.browserslistrc
[10:03:28] Including      : A:\work\angular-pipe-examples\.editorconfig
[10:03:28] Including      : A:\work\angular-pipe-examples\.gitignore
[10:03:28] Including      : A:\work\angular-pipe-examples\angular.json
[10:03:28] Including      : A:\work\angular-pipe-examples\package.json
[10:03:28] Including      : A:\work\angular-pipe-examples\README.md
[10:03:28] Including      : A:\work\angular-pipe-examples\tsconfig.json
[10:03:28] Including      : A:\work\angular-pipe-examples\karma.conf.js
[10:03:28] Including      : A:\work\angular-pipe-examples\tsconfig.app.json
[10:03:28] Including      : A:\work\angular-pipe-examples\tsconfig.spec.json
[10:03:28] Including      : A:\work\angular-pipe-examples\package-lock.json
[10:03:28] Including      : A:\work\angular-pipe-examples\src\favicon.ico
[10:03:28] Including      : A:\work\angular-pipe-examples\src\index.html
[10:03:28] Including      : A:\work\angular-pipe-examples\src\main.ts
[10:03:28] Including      : A:\work\angular-pipe-examples\src\polyfills.ts
[10:03:28] Including      : A:\work\angular-pipe-examples\src\styles.scss
[10:03:28] Including      : A:\work\angular-pipe-examples\src\test.ts
[10:03:28] Including      : A:\work\angular-pipe-examples\src\app\app-routing.module.ts
[10:03:28] Including      : A:\work\angular-pipe-examples\src\app\app.component.html
[10:03:28] Including      : A:\work\angular-pipe-examples\src\app\app.module.ts
[10:03:28] Including      : A:\work\angular-pipe-examples\src\assets\.gitkeep
[10:03:28] Including      : A:\work\angular-pipe-examples\src\environments\environment.prod.ts
[10:03:28] Including      : A:\work\angular-pipe-examples\src\app\app.component.scss
[10:03:28] Including      : A:\work\angular-pipe-examples\src\environments\environment.ts
[10:03:28] Ignoring       : A:\work\angular-pipe-examples\src\app\app.component.spec.ts
[10:03:28] Including      : A:\work\angular-pipe-examples\src\app\app.component.ts
[10:03:28] Including      : A:\work\angular-pipe-examples\src\app\currency-pipe-example\currency-pipe-example.component.html
[10:03:28] Including      : A:\work\angular-pipe-examples\src\app\currency-pipe-example\currency-pipe-example.component.scss
[10:03:28] Ignoring       : A:\work\angular-pipe-examples\src\app\currency-pipe-example\currency-pipe-example.component.spec.ts
[10:03:28] Including      : A:\work\angular-pipe-examples\src\app\decimal-pipe-example\decimal-pipe-example.component.html
[10:03:28] Including      : A:\work\angular-pipe-examples\src\app\decimal-pipe-example\decimal-pipe-example.component.scss
[10:03:28] Including      : A:\work\angular-pipe-examples\src\app\currency-pipe-example\currency-pipe-example.component.ts
[10:03:28] Ignoring       : A:\work\angular-pipe-examples\src\app\decimal-pipe-example\decimal-pipe-example.component.spec.ts
[10:03:28] Including      : A:\work\angular-pipe-examples\src\app\decimal-pipe-example\decimal-pipe-example.component.ts
[10:03:28] Including      : A:\work\angular-pipe-examples\src\app\lower-case-pipe\lower-case-pipe.component.html
[10:03:28] Ignoring       : A:\work\angular-pipe-examples\src\app\lower-case-pipe\lower-case-pipe.component.spec.ts
[10:03:28] Including      : A:\work\angular-pipe-examples\src\app\title-case-pipe\title-case-pipe.component.html
[10:03:28] Including      : A:\work\angular-pipe-examples\src\app\title-case-pipe\title-case-pipe.component.scss
[10:03:28] Ignoring       : A:\work\angular-pipe-examples\src\app\title-case-pipe\title-case-pipe.component.spec.ts
[10:03:28] Including      : A:\work\angular-pipe-examples\src\app\title-case-pipe\title-case-pipe.component.ts
[10:03:28] Including      : A:\work\angular-pipe-examples\src\app\upper-case-pipe\upper-case-pipe.component.html
[10:03:28] Including      : A:\work\angular-pipe-examples\src\app\upper-case-pipe\upper-case-pipe.component.scss
[10:03:28] Ignoring       : A:\work\angular-pipe-examples\src\app\upper-case-pipe\upper-case-pipe.component.spec.ts
[10:03:28] Including      : A:\work\angular-pipe-examples\src\app\upper-case-pipe\upper-case-pipe.component.ts
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\babel-webpack\1525326e6782321538949d538eb1e17e.json
[10:03:28] Including      : A:\work\angular-pipe-examples\src\app\lower-case-pipe\lower-case-pipe.component.scss
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\babel-webpack\0e2764a8f4b02530732f6f553b2c2712.json
[10:03:28] Including      : A:\work\angular-pipe-examples\src\app\lower-case-pipe\lower-case-pipe.component.ts
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\babel-webpack\15c97a46e9522af6ff1bfcdafd84dda4.json
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\babel-webpack\3c3f6a7b192c325f441f4b5252baba0c.json
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\babel-webpack\4e4e5a9d500b913dfaa82897a502f118.json
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\babel-webpack\28992d1446a7a4c4be92e1729bc7efcc.json
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\babel-webpack\5cfefb9c3ebe97b5113b778391563bdc.json
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\babel-webpack\2fdb9618994a060f405831fb715b6a59.json
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\babel-webpack\69d69519495a3c92c94933801ffc50d7.json
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\babel-webpack\759a12358d936a613ed5d61f3419a220.json
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\babel-webpack\74e669d47f05eae4e51271607462bfa2.json
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\babel-webpack\7c8d0fe952b02348695b188d9300ca8a.json
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\babel-webpack\47284b13dab0781e9edd82e05a803c8e.json
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\babel-webpack\896694d2bfc299583a3795e01207ba42.json
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\babel-webpack\9a876f7f03625cd3d1a07e0656062b41.json
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\babel-webpack\ae74896273ccc31f02c9a70aa591ba30.json
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\babel-webpack\c2f1bafd0f1e42cc648deae1318279a8.json
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\babel-webpack\d12955888b03034e25fdb8213a9ca9fe.json
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\babel-webpack\efeba5a98bdd0a6500392a7c821885ff.json
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\babel-webpack\ea39da09b24df2adbf55510818e09346.json
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\babel-webpack\f0df07900fb5cb02610ae52111a28fc3.json
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\babel-webpack\5afc63b1fa4ea86470878752549581dc.json
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\angular-webpack\2bd0f7f4885e89cfb344ea2a7ba4ed2416277abc\0.pack
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\angular-webpack\2bd0f7f4885e89cfb344ea2a7ba4ed2416277abc\1.pack
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\angular-webpack\2bd0f7f4885e89cfb344ea2a7ba4ed2416277abc\11.pack
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\angular-webpack\2bd0f7f4885e89cfb344ea2a7ba4ed2416277abc\13.pack
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\angular-webpack\2bd0f7f4885e89cfb344ea2a7ba4ed2416277abc\12.pack
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\angular-webpack\2bd0f7f4885e89cfb344ea2a7ba4ed2416277abc\14.pack
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\angular-webpack\2bd0f7f4885e89cfb344ea2a7ba4ed2416277abc\15.pack
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\angular-webpack\2bd0f7f4885e89cfb344ea2a7ba4ed2416277abc\2.pack
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\angular-webpack\2bd0f7f4885e89cfb344ea2a7ba4ed2416277abc\4.pack
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\angular-webpack\2bd0f7f4885e89cfb344ea2a7ba4ed2416277abc\3.pack
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\angular-webpack\2bd0f7f4885e89cfb344ea2a7ba4ed2416277abc\5.pack
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\angular-webpack\2bd0f7f4885e89cfb344ea2a7ba4ed2416277abc\6.pack
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\angular-webpack\2bd0f7f4885e89cfb344ea2a7ba4ed2416277abc\7.pack
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\angular-webpack\2bd0f7f4885e89cfb344ea2a7ba4ed2416277abc\8.pack
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\angular-webpack\2bd0f7f4885e89cfb344ea2a7ba4ed2416277abc\index.pack.old
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\angular-webpack\2bd0f7f4885e89cfb344ea2a7ba4ed2416277abc\9.pack
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\angular-webpack\2bd0f7f4885e89cfb344ea2a7ba4ed2416277abc\index.pack
[10:03:28] Including      : A:\work\angular-pipe-examples\.angular\cache\angular-webpack\2bd0f7f4885e89cfb344ea2a7ba4ed2416277abc\10.pack
[10:03:28] Searching package.json file
[10:03:28] package.json file found
[10:03:28] Processing package.json dependencies
[10:03:28] Searching README.md, CHANGELOG.md, CONTRIBUTING.md, LICENSE.md, TODO.md files
[10:03:28] README.md file found
[10:03:28] Error during A:\work\angular-pipe-examples\CHANGELOG read
[10:03:28] Continuing without CHANGELOG.md file
[10:03:28] Error during A:\work\angular-pipe-examples\CONTRIBUTING read
[10:03:28] Continuing without CONTRIBUTING.md file
[10:03:28] Error during A:\work\angular-pipe-examples\LICENSE read
[10:03:28] Continuing without LICENSE.md file
[10:03:28] Error during A:\work\angular-pipe-examples\TODO read
[10:03:28] Continuing without TODO.md file
[10:03:28] Get dependencies data
[10:03:29] parsing        : A:/work/angular-pipe-examples/src/main.ts
[10:03:29] parsing        : A:/work/angular-pipe-examples/src/polyfills.ts
[10:03:29] parsing        : A:/work/angular-pipe-examples/src/test.ts
[10:03:29] found          : require
[10:03:29] found          : context
[10:03:29] parsing        : A:/work/angular-pipe-examples/src/app/app-routing.module.ts
[10:03:29] Analysing routes definitions and clean them if necessary
[10:03:29] found          : AppRoutingModule
[10:03:29]                : - imports:
[10:03:29]                :     - RouterModule
[10:03:29]                : - exports:
[10:03:29]                :     - RouterModule
[10:03:29] parsing        : A:/work/angular-pipe-examples/src/app/app.module.ts
[10:03:29] found          : AppModule
[10:03:29]                : - imports:
[10:03:29]                :     - CommonModule
[10:03:29]                :     - BrowserModule
[10:03:29]                :     - AppRoutingModule
[10:03:29]                : - declarations:
[10:03:29]                :     - AppComponent
[10:03:29]                :     - TitleCasePipeComponent
[10:03:29]                :     - UpperCasePipeComponent
[10:03:29]                :     - LowerCasePipeComponent
[10:03:29]                :     - CurrencyPipeExampleComponent
[10:03:29]                :     - DecimalPipeExampleComponent
[10:03:29]                : - providers:
[10:03:29]                :     - AppComponent
[10:03:29]                :     - DecimalPipe
[10:03:29]                : - bootstrap:
[10:03:29]                :     - AppComponent
[10:03:29] parsing        : A:/work/angular-pipe-examples/src/environments/environment.prod.ts
[10:03:29] found          : environment
[10:03:29] parsing        : A:/work/angular-pipe-examples/src/environments/environment.ts
[10:03:29] found          : environment
[10:03:29] parsing        : A:/work/angular-pipe-examples/src/app/app.component.ts
[10:03:29] found          : AppComponent
[10:03:29] parsing        : A:/work/angular-pipe-examples/src/app/currency-pipe-example/currency-pipe-example.component.ts
[10:03:29] found          : CurrencyPipeExampleComponent
[10:03:29] parsing        : A:/work/angular-pipe-examples/src/app/decimal-pipe-example/decimal-pipe-example.component.ts
[10:03:29] found          : DecimalPipeExampleComponent
[10:03:29] parsing        : A:/work/angular-pipe-examples/src/app/title-case-pipe/title-case-pipe.component.ts
[10:03:29] found          : TitleCasePipeComponent
[10:03:29]                : - providers:
[10:03:29]                :     - TitleCasePipe
[10:03:29] parsing        : A:/work/angular-pipe-examples/src/app/upper-case-pipe/upper-case-pipe.component.ts
[10:03:29] found          : UpperCasePipeComponent
[10:03:29]                : - providers:
[10:03:29]                :     - UpperCasePipe
[10:03:29] parsing        : A:/work/angular-pipe-examples/src/app/lower-case-pipe/lower-case-pipe.component.ts
[10:03:29] found          : LowerCasePipeComponent
[10:03:29]                : - providers:
[10:03:29]                :     - LowerCasePipe
[10:03:29] -------------------
[10:03:29] Project statistics
[10:03:29] - files      : 80
[10:03:29] - module     : 2
[10:03:29] - component  : 6
[10:03:29] -------------------
[10:03:29] Prepare components
[10:03:29]  AppComponent has a templateUrl, include it
[10:03:29]  AppComponent has styleUrls, include them
[10:03:29]  CurrencyPipeExampleComponent has a templateUrl, include it
[10:03:29]  CurrencyPipeExampleComponent has styleUrls, include them
[10:03:29]  DecimalPipeExampleComponent has a templateUrl, include it
[10:03:29]  DecimalPipeExampleComponent has styleUrls, include them
[10:03:29]  LowerCasePipeComponent has a templateUrl, include it
[10:03:29]  LowerCasePipeComponent has styleUrls, include them
[10:03:29]  TitleCasePipeComponent has a templateUrl, include it
[10:03:29]  TitleCasePipeComponent has styleUrls, include them
[10:03:29]  UpperCasePipeComponent has a templateUrl, include it
[10:03:29]  UpperCasePipeComponent has styleUrls, include them
[10:03:29] Prepare modules
[10:03:29] Process routes
[10:03:29]  Routes index generated
[10:03:29] Prepare miscellaneous
[10:03:29] Process documentation coverage report
[10:03:29] Process main graph
[10:03:30] Process module graph : AppModule
[10:03:30] Process module graph : AppRoutingModule
[10:03:30] Process pages
[10:03:30] Process page   : AppComponent
[10:03:30] Process page   : AppModule
[10:03:30] Process page   : AppRoutingModule
[10:03:30] Process page   : CurrencyPipeExampleComponent
[10:03:30] Process page   : DecimalPipeExampleComponent
[10:03:30] Process page   : LowerCasePipeComponent
[10:03:30] Process page   : TitleCasePipeComponent
[10:03:30] Process page   : UpperCasePipeComponent
[10:03:30] Process page   : coverage
[10:03:30] Process page   : dependencies
[10:03:30] Process page   : index
[10:03:30] Process page   : modules
[10:03:30] Process page   : overview
[10:03:30] Process page   : routes
[10:03:30] Process page   : variables
[10:03:31] Process menu...
[10:03:32] Copy main resources
[10:03:33] Documentation generated in ./documentation/ in 5.547 seconds using gitbook theme

It generates a documentation folder in the Angular app.

Go to the documentation folder, You can open index.html

or run the below command

compodoc -s tsconfig.json

It starts with the web server and listening at the 8080 port.

Angular documentation Generator CompoDoc

You can access UI at localhost:8080 with the below UI elements and features

Getting Started
- OVERVIEW It is a Getting started guide with an overview of the graph of components and modules with dependencies with routes mapping in an application
- README It is a README file that contains markdown content rendered as HTML pages.
- Dependencies It contains application dependencies with all versions
Modules It contains Modules that include Routing modules with graph hierarchy
Miscellaneous It contains variables for application and test components
Routes

It contains application routes from start to end flow

Documentation Coverage It includes documentation covered for each component and file.