Tips and tricks

Table of Contents

Styling the documentation

compodoc -p src/tsconfig.json -y your_theme_styles/

Inside your folder you need to provide at least a style.css file with these 5 imports as below.

@import "./reset.css";
@import "./bootstrap.min.css";
@import "./bootstrap-card.css";
@import "./font-awesome.min.css";
@import "./compodoc.css";
@import "./prism.css";
@import "./tablesort.css";

Compodoc use bootstrap 3.3.7. You can customize Compodoc easily. can be a good starting point. If you want to override the default theme, just provide a bootstrap.min.css file, and it will override the default one.

└── your_theme_styles/
    ├── style.css // the main css file with default imports
    └── bootstrap.min.css // your bootstrap theme

Documentation of each component, module, directives etc

A comment description in xxx.component.ts file, between JSDoc comments can be a little short.

Compodoc search for a default file inside the root folder of each component, and add it inside a tab in the component page. It is the same for class, module etc.

└── my-component/
    ├── my.component.ts
    ├── my.component.spec.ts
    ├── my.component.scss|css
    ├── my.component.html

Additional documentation

Compodoc support the addition of external markdown files for extending the code comments of your application and the main README file.

Create a folder containing markdown files and use --includes flag to extend the documentation. Your folder should contain a summary.json file explaining the structure and files :


        "title": "A TITLE",
        "file": ""
        "title": "A TITLE",
        "file": "",
        "children": [
                "title": "A TITLE",
                "file": "a-sub-folder/"

Links are supported like regular markdown links.

Documentation of several apps in a monorepository

Nrwl Extensions for Angular is a toolkit for enterprise Angular applications. It provides an opinionated approach to application project structure and patterns.

A monorepository with multiple apps could easily be documentated by Compodoc. You just have to run Compodoc in each apps seperately. Here is an example with nx-examples :

├── apps
│   ├── demo
│   │   └── src
│   │       └──
│   ├── profile
│   ├── school
│   └── teach

Just run Compodoc like that :

cd apps/demo/src
compodoc -p -s

// or

compodoc -p apps/demo/src/ -s

Syntax highlighting in markdown files

Compodoc use Marked for markdown parsing and compiling to html. prismjs.js has been added for supporting syntax highlighting.

Just use a normal code block in your markdown with correct language : Github help

The integrated languages are : json, bash, javascript, markdown, html, scss, typescript

Excluding files

For excluding files from the documentation, simply use the exclude property of tsconfig.json file.

You can exclude specific file with name app/myfile.ts or with glob pattern **/*.spec.ts.

Including files

For including files from the documentation, simply use the include property of tsconfig.json file.

You can include specific file with name app/myfile.ts or with glob pattern **/*.ts.