{"id":486,"date":"2020-10-22T15:22:07","date_gmt":"2020-10-22T13:22:07","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=486"},"modified":"2020-10-22T15:22:07","modified_gmt":"2020-10-22T13:22:07","slug":"compodoc-documentation-tool-for-angular-project","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2020\/10\/22\/compodoc-documentation-tool-for-angular-project\/","title":{"rendered":"Compodoc – documentation tool for angular project –"},"content":{"rendered":"\n

What is Compodoc ?<\/h4>\n\n\n\n

Compodoc is a documentation tool for Angular applications. It generates a static documentation of your application.<\/p>\n\n\n\n

Why Use Compodoc ?<\/h4>\n\n\n\n

Compodoc helps Angular developers providing a clear and helpful documentation of their application.<\/p>\n\n\n\n

Others developers of your team, or internet visitors for a public documentation, can easily understand the features of your application or library.<\/p>\n\n\n\n

Open Source<\/h4>\n\n\n\n

Compodoc is an open source effort from Vincent Ogloblinsky<\/a>.<\/p>\n\n\n\n

Developers can contribute and fork the repo on\u00a0GitHub<\/a>.<\/p>\n\n\n\n

Node.js versions<\/h4>\n\n\n\n

Compodoc is tested with only LTS versions : v10.x, v8.x ; and support also Node.js v10.x+<\/p>\n\n\n\n

Angular-CLI<\/h4>\n\n\n\n

Compodoc supports last Angular-CLI version : 10.x<\/p>\n\n\n\n

Just run Compodoc in a fresh or existing project.<\/p>\n\n\n\n

Global installation<\/span><\/h4>\n\n\n\n
npm install -g @compodoc\/compodoc<\/code><\/pre>\n\n\n\n
If you use PowerShell on Windows, add quotes :<\/span><\/em>   npm install -g “@compodoc\/compodoc”<\/span><\/p>\n\n\n\n
Local installation<\/span><\/h4>\n\n\n\n
npm install --save-dev @compodoc\/compodoc<\/code><\/pre>\n\n\n\n
Run<\/span><\/h4>\n\n\n\n
Define a script task for it in your package.json (with npm 6.x) :<\/p>\n\n\n\n
\"scripts\": {\n  \"doc\": \"compodoc -p tsconfig.json --serve --open -w\"\n}<\/code><\/pre>\n\n\n\n
and run it like a normal npm script :<\/p>\n\n\n\n
npm run doc<\/code><\/pre>\n\n\n\n
Position of tsconfig file in codebase<\/h4>\n\n\n\n
Compodoc start at the folder level of the tsconfig file provided with -p<\/code> option.<\/p>\n\n\n\n
Example for an Angular CLI project :<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
compodoc -p tsconfig.app.json src<\/code><\/pre>\n\n\n\n
Usage<\/span><\/h4>\n\n\n\n
compodoc <src> [options]<\/code><\/pre>\n\n\n\n
Options :<\/h1>\n\n\n\n
Flag<\/th>Description<\/th><\/tr><\/thead>
-h, –help<\/strong><\/td>output usage information<\/td><\/tr>
-V, –version<\/strong><\/td>output the version number<\/td><\/tr>
-c, –config [config]<\/strong><\/td>A configuration file : .compodocrc, .compodocrc.json, .compodocrc.yaml or compodoc property in package.json<\/td><\/tr>
-p, –tsconfig [config]<\/strong><\/td>A tsconfig.json file<\/td><\/tr>
-d, –output [folder]<\/strong><\/td>Where to store the generated documentation<\/td><\/tr>
-y, –extTheme [file]<\/strong><\/td>External styling theme<\/td><\/tr>
-n, –name [name]<\/strong><\/td>Title of the documentation<\/td><\/tr>
-a, –assetsFolder [folder]<\/strong><\/td>External assets folder to copy in generated documentation folder<\/td><\/tr>
-o, –open<\/strong><\/td>Open the generated documentation<\/td><\/tr>
-t, –silent<\/strong><\/td>In silent mode, log messages aren’t logged in the console<\/td><\/tr>
-s, –serve<\/strong><\/td>Serve generated documentation (default http:\/\/localhost:8080\/<\/a>)<\/td><\/tr>
-r, –port [port]<\/strong><\/td>Change default serving port<\/td><\/tr>
-w, –watch<\/strong><\/td>Watch source files after serve and force documentation rebuild<\/td><\/tr>
-e, –exportFormat [format]<\/strong><\/td>Export in specified format (json, html (default))<\/td><\/tr>
–language [language]<\/strong><\/td>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)<\/td><\/tr>
–theme [theme]<\/strong><\/td>Choose one of available themes, default is ‘gitbook’ (laravel, original, material, postmark, readthedocs, stripe, vagrant)<\/td><\/tr>
–hideGenerator<\/strong><\/td>Do not print the Compodoc logo at the bottom of the page<\/td><\/tr>
–toggleMenuItems<\/strong><\/td>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’])<\/td><\/tr>
–navTabConfig<\/strong><\/td>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<\/td><\/tr>
–templates [folder]<\/strong><\/td>Path to directory of Handlebars templates to override built-in templates<\/td><\/tr>
–includes [path]<\/strong><\/td>Path of external markdown files to include<\/td><\/tr>
–includesName [name]<\/strong><\/td>Name of item menu of externals markdown files (default “Additional documentation”)<\/td><\/tr>
–coverageTest<\/strong><\/td>Test command of documentation coverage with a threshold (default 70)<\/td><\/tr>
–coverageMinimumPerFile [minimum]<\/strong><\/td>Test command of documentation coverage per file with a minimum (default 0)<\/td><\/tr>
–coverageTestThresholdFail [boolean]<\/strong><\/td>Test command of documentation coverage (global or per file) will fail with error or just warn user (true: error, false: warn) (default: true)<\/td><\/tr>
–coverageTestShowOnlyFailed<\/strong><\/td>Display only failed files for a coverage test<\/td><\/tr>
–unitTestCoverage [json-summary]<\/strong><\/td>To include unit test coverage, specify istanbul JSON coverage summary file<\/td><\/tr>
–disableSourceCode<\/strong><\/td>Do not add source code tab and links to source code<\/td><\/tr>
–disableDomTree<\/strong><\/td>Do not add dom tree tab<\/td><\/tr>
–disableTemplateTab<\/strong><\/td>Do not add template tab<\/td><\/tr>
–disableStyleTab<\/strong><\/td>Do not add style tab<\/td><\/tr>
–disableGraph<\/strong><\/td>Disable rendering of the dependency graph<\/td><\/tr>
–disableCoverage<\/strong><\/td>Do not add the documentation coverage report<\/td><\/tr>
–disablePrivate<\/strong><\/td>Do not show private in generated documentation<\/td><\/tr>
–disableProtected<\/strong><\/td>Do not show protected in generated documentation<\/td><\/tr>
–disableInternal<\/strong><\/td>Do not show @internal in generated documentation<\/td><\/tr>
–disableLifeCycleHooks<\/strong><\/td>Do not show Angular lifecycle hooks in generated documentation<\/td><\/tr>
–disableRoutesGraph<\/strong><\/td>Do not add the routes graph<\/td><\/tr>
–disableSearch<\/strong><\/td>Do not add the search input<\/td><\/tr>
–disableDependencies<\/strong><\/td>Do not add the dependencies list<\/td><\/tr>
–minimal<\/strong><\/td>Minimal mode with only documentation. No search, no graph, no coverage.<\/td><\/tr>
–customFavicon [path]<\/strong><\/td>Use a custom favicon<\/td><\/tr>
–customLogo [path]<\/strong><\/td>Use a custom logo<\/td><\/tr>
–gaID [id]<\/strong><\/td>Google Analytics tracking ID<\/td><\/tr>
–gaSite [site]<\/strong><\/td>Google Analytics site name (default auto (default: auto)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/p>\n\n\n\n
Reference:<\/h5>\n\n\n\n
https:\/\/compodoc.app\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[119,120],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/486"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=486"}],"version-history":[{"count":14,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/486\/revisions"}],"predecessor-version":[{"id":501,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/486\/revisions\/501"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}