What is Compodoc ?
Compodoc is a documentation tool for Angular applications. It generates a static documentation of your application.
Why Use Compodoc ?
Compodoc helps Angular developers providing a clear and helpful documentation of their application.
Others developers of your team, or internet visitors for a public documentation, can easily understand the features of your application or library.
Open Source
Compodoc is an open source effort from Vincent Ogloblinsky.
Developers can contribute and fork the repo on GitHub.
Node.js versions
Compodoc is tested with only LTS versions : v10.x, v8.x ; and support also Node.js v10.x+
Angular-CLI
Compodoc supports last Angular-CLI version : 10.x
Just run Compodoc in a fresh or existing project.
Global installation
npm install -g @compodoc/compodocIf you use PowerShell on Windows, add quotes : npm install -g “@compodoc/compodoc”
Local installation
npm install --save-dev @compodoc/compodocRun
Define a script task for it in your package.json (with npm 6.x) :
"scripts": {
"doc": "compodoc -p tsconfig.json --serve --open -w"
}and run it like a normal npm script :
npm run docPosition of tsconfig file in codebase
Compodoc start at the folder level of the tsconfig file provided with -p option.
Example for an Angular CLI project :
compodoc -p tsconfig.app.json srcUsage
compodoc <src> [options]Options :
| Flag | Description |
|---|---|
| -h, –help | output usage information |
| -V, –version | output the version number |
| -c, –config [config] | A configuration file : .compodocrc, .compodocrc.json, .compodocrc.yaml or compodoc property in package.json |
| -p, –tsconfig [config] | A tsconfig.json file |
| -d, –output [folder] | Where to store the generated documentation |
| -y, –extTheme [file] | External styling theme |
| -n, –name [name] | Title of the documentation |
| -a, –assetsFolder [folder] | External assets folder to copy in generated documentation folder |
| -o, –open | Open the generated documentation |
| -t, –silent | In silent mode, log messages aren’t logged in the console |
| -s, –serve | Serve generated documentation (default http://localhost:8080/) |
| -r, –port [port] | Change default serving port |
| -w, –watch | Watch source files after serve and force documentation rebuild |
| -e, –exportFormat [format] | Export in specified format (json, html (default)) |
| –language [language] | Language used for the generated documentation (en-US, es-ES, fr-FR, hu-HU, it-IT, ja-JP, nl-NL, pt-BR, zh-CN) (default: en-US) |
| –theme [theme] | Choose one of available themes, default is ‘gitbook’ (laravel, original, material, postmark, readthedocs, stripe, vagrant) |
| –hideGenerator | Do not print the Compodoc logo at the bottom of the page |
| –toggleMenuItems | Close by default items in the menu (default [‘all’]) values : [‘all’] or one of these [‘modules’,’components’,’directives’,’controllers’,’classes’,’injectables’,’guards’,’interfaces’,’interceptors’,’pipes’,’miscellaneous’,’additionalPages’]) |
| –navTabConfig | List navigation tab objects in the desired order with two string properties (“id” and “label”). Double-quotes must be escaped with ‘\’. Available tab IDs are “info”, “readme”, “source”, “templateData”, “tree”, and “example”. Note: Certain tabs will only be shown if applicable to a given dependency |
| –templates [folder] | Path to directory of Handlebars templates to override built-in templates |
| –includes [path] | Path of external markdown files to include |
| –includesName [name] | Name of item menu of externals markdown files (default “Additional documentation”) |
| –coverageTest | Test command of documentation coverage with a threshold (default 70) |
| –coverageMinimumPerFile [minimum] | Test command of documentation coverage per file with a minimum (default 0) |
| –coverageTestThresholdFail [boolean] | Test command of documentation coverage (global or per file) will fail with error or just warn user (true: error, false: warn) (default: true) |
| –coverageTestShowOnlyFailed | Display only failed files for a coverage test |
| –unitTestCoverage [json-summary] | To include unit test coverage, specify istanbul JSON coverage summary file |
| –disableSourceCode | Do not add source code tab and links to source code |
| –disableDomTree | Do not add dom tree tab |
| –disableTemplateTab | Do not add template tab |
| –disableStyleTab | Do not add style tab |
| –disableGraph | Disable rendering of the dependency graph |
| –disableCoverage | Do not add the documentation coverage report |
| –disablePrivate | Do not show private in generated documentation |
| –disableProtected | Do not show protected in generated documentation |
| –disableInternal | Do not show @internal in generated documentation |
| –disableLifeCycleHooks | Do not show Angular lifecycle hooks in generated documentation |
| –disableRoutesGraph | Do not add the routes graph |
| –disableSearch | Do not add the search input |
| –disableDependencies | Do not add the dependencies list |
| –minimal | Minimal mode with only documentation. No search, no graph, no coverage. |
| –customFavicon [path] | Use a custom favicon |
| –customLogo [path] | Use a custom logo |
| –gaID [id] | Google Analytics tracking ID |
| –gaSite [site] | Google Analytics site name (default auto (default: auto) |