Open rehdie opened 2 months ago
To resolve the issue of JSDoc comments not appearing in the autodoc documentation for Angular components, follow these steps:
setCompodocJson
function in /code/addons/docs/angular/index.js
:import { global } from '@storybook/global';
export const setCompodocJson = (compodocJson) => {
global.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
};
Check that the Compodoc JSON is being correctly generated and passed to Storybook. This can be done by running Compodoc manually and ensuring the JSON output includes the JSDoc comments.
Verify that the tsconfig.json
in your Angular project includes the necessary settings to process JSDoc comments. The tsconfig.json
should look similar to the one in /code/frameworks/angular/src/client/docs/__testfixtures__/doc-button/tsconfig.json
:
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"rootDir": "."
},
"include": ["./*.ts"]
}
doc-button.component.ts
file includes JSDoc comments and that these comments are correctly formatted. Example:/**
* Button component
* @example
* <app-doc-button></app-doc-button>
*/
@Component({
selector: 'app-doc-button',
templateUrl: './doc-button.component.html',
styleUrls: ['./doc-button.component.scss']
})
export class DocButtonComponent {
/**
* Button label
*/
@Input() label: string;
}
/code/addons/docs/angular/index.js /code/addons/docs/angular/index.d.ts /code/frameworks/angular/src/client/docs/testfixtures/doc-button/tsconfig.json /code/frameworks/angular/src/builders/start-storybook/index.spec.ts /code/addons/docs/angular /code/frameworks/angular/src/client/docs /code/frameworks/angular/template/stories/argTypes/doc-button
Hi @rehdie
Thank you for reporting this issue. Could you link the related issue that was closed?
Hi @rehdie
Thank you for reporting this issue. Could you link the related issue that was closed?
done
Adding the fix that worked for for my Angular Monorepo. The storybook tsconfig looked like it was parsing only stories.ts and preview.ts files. I had to manually add *.component.ts in the tsconfig includes array where the jsodc comments actually existed.
I created a library project using Angular 18 and added storybook to the library, but the jsdoc comments were not rendered. Versions used.
"@angular/core": "^18.2.0", "@angular/cli": "^18.2.0", "storybook": "^8.2.9",
Angular monorepo structure. Storybook was added using npx storybook init and choosing ui-library as project
"workspaces": [ "projects/ui-library", "projects/ui-demo" ],
Fixed by adding "../src/lib/*/.component.*" to the includes array in .storybook/tsconfig.json which was autogenerated in the library root folder when using npx storybook init.
"include": ["../src/**/*.stories.*", "./preview.ts", "../src/lib/**/*.component.*"],
Describe the bug
There are issues regarding the same problem (#21387, #11674) which are already closed, but the problem still exists.
The autodoc documentation does not contain the information from jsdoc-comments. Just add storybook to an existing angular project and check the documentation of Example/Button (which is created during the installation of storybook), which looks like this:
I've created a stackblitz reproduction (uploaded my local project), but at the time of creating this issue, running
npm install
at stackblitz was always failing with ECONNRESET. Downloading the project from stackblitz and trying locally works.Reproduction link
https://stackblitz.com/edit/stackblitz-starters-dcmzh2
Reproduction steps
ng new storybook-doc-test --create-application=false
cd storybook-doc-test
ng g library @sb/doc-test
npx storybook@latest init
(question regarding compodoc answered with yes, but the problem still exists, if answered with no)npm install
againnpm run storybook
=> look at the documentation for the button-component, which was created by storybook itself => all the jsdoc comments do not show up in the documentation, therefore it is quite useless.
System
Additional context
The angular cli version used to create the project was 17.3.8.