How to generate documentation in Angular Compodoc

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.