Nx: Generate docs for component libraries

Created on 16 Feb 2018 · 12Comments · Source: nrwl/nx

Option to auto generate docs from dumb component libraries to increase the discoverability of the shared modules. You can see a generated doc example here: http://ui.sportngin.com/

storybook feature

Source

Yonet

👍1

Most helpful comment

My team was able to do this pretty easily using Compodoc.

Compodoc reads your entire Angular app without actually compiling the source. Just create a new tsconfig.json at the root level of your project and be sure to use the following...

{
...
"include": [
    "apps/**/*.ts",
    "libs/**/*.ts"
]
...
}

Then you can run compodoc -p ./tsconfig.compodoc.json and easily create living docs related to your Nx workspace.

tyler-morrison on 19 Feb 2018

👍8

All 12 comments

My team was able to do this pretty easily using Compodoc.

Compodoc reads your entire Angular app without actually compiling the source. Just create a new tsconfig.json at the root level of your project and be sure to use the following...

{
...
"include": [
    "apps/**/*.ts",
    "libs/**/*.ts"
]
...
}

Then you can run compodoc -p ./tsconfig.compodoc.json and easily create living docs related to your Nx workspace.

tyler-morrison on 19 Feb 2018

👍8

I have added a special paragraph in the documentation about this use-case : https://compodoc.github.io/website/guides/tips-and-tricks.html#documentation-of-several-apps-in-a-monorepository

vogloblinsky on 3 Apr 2018

👍3

using alias paths in the application seems this is not working
example :

in app.module.ts

import { productModule } from "@eshop/product"

in tsconfig.compdoc.ts:

"paths": {
    "@eshop/product" : ["libs/product/src/index.ts"]
}

I get the error :

<rejected> { Error: File not found: C:/git-projects/online-shop/frontend/apps/eshop/src/app/@eshop/product.ts

FadiNouh1 on 19 Nov 2019

@FadiNouh1 Compodoc doesn't support that right now, sorry..

vogloblinsky on 19 Nov 2019

@vogloblinsky it seems the nx demo you point to in the compodoc docs has changed and no longer includes compodoc.

nayfin on 8 Feb 2020

It seems Compodoc yet to implement notion of NX application and library. Is there any effort in this direction? I'd like to contribute, but don't know if I should start it by myself or join somebody to help.

liquidautumn on 17 Feb 2020

Closing this issue as we now have storybook support and also there is a plugin for compodoc. :tada:

FrozenPandaz on 9 May 2020

@FrozenPandaz I can't find the compodoc plugin, do you have a link you could add?

nayfin on 9 May 2020

Here's a link to the community plugin:

https://github.com/twittwer/nx-tools/tree/master/libs/compodoc#readme

There's also a full list of community plugins that you can find here!

https://nx.dev/nx-community

FrozenPandaz on 11 May 2020

👍2 🚀1 😕1

@FrozenPandaz excuse me if this is a stupid question, how can I add this plugin on a v8 workspace?

m4r4c00ch0 on 13 Jun 2020

Here's a link to the community plugin:

https://github.com/twittwer/nx-tools/tree/master/libs/compodoc#readme

There's also a full list of community plugins that you can find here!

https://nx.dev/nx-community

I got this error with Angular 10 and @nrwl 10.

node_modules/viz.js/viz.js:33 Invalid asm.js: Function definition doesn't match use

curiouscod3 on 3 Aug 2020

👍1

Here's a link to the community plugin:
https://github.com/twittwer/nx-tools/tree/master/libs/compodoc#readme
There's also a full list of community plugins that you can find here!
https://nx.dev/nx-community

I got this error with Angular 10 and @nrwl 10.
node_modules/viz.js/viz.js:33 Invalid asm.js: Function definition doesn't match use

I think this is an issue with the viz library. if you don't need html view, you can use nx run <project>:compodoc:json