[Bug]: autodoc for angular components does not include jsdoc-documentation

rehdie commented 2 months ago

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:

story-book-autodoc

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)
since the latest compodoc-version has a dependency to angular 18 (which causes a warning during npm install, because the node-version I'm using is not compatible with angular 18), I've changed the version of compodoc to "1.1.21"
npm install again
npm 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

Storybook Environment Info:

  System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 AMD Ryzen 7 PRO 4750U with Radeon Graphics   
  Binaries:
    Node: 18.19.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD <----- active
    pnpm: 8.4.0 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Chrome: 114.0.5735.134
    Edge: Chromium (126.0.2592.87)
  npmPackages:
    @storybook/addon-docs: ^8.2.0 => 8.2.0
    @storybook/addon-essentials: ^8.2.0 => 8.2.0
    @storybook/addon-interactions: ^8.2.0 => 8.2.0
    @storybook/addon-links: ^8.2.0 => 8.2.0
    @storybook/addon-onboarding: ^8.2.0 => 8.2.0
    @storybook/angular: ^8.2.0 => 8.2.0
    @storybook/blocks: ^8.2.0 => 8.2.0
    @storybook/test: ^8.2.0 => 8.2.0
    storybook: ^8.2.0 => 8.2.0

Additional context

The angular cli version used to create the project was 17.3.8.

greptile-apps[bot] commented 2 months ago

To resolve the issue of JSDoc comments not appearing in the autodoc documentation for Angular components, follow these steps:

Ensure that Compodoc is correctly integrated by verifying the 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"]
}

Ensure that the 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;
}

Run Storybook and verify that the JSDoc comments are now included in the documentation.

References

/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

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)

valentinpalkovic commented 2 months ago

Hi @rehdie

Thank you for reporting this issue. Could you link the related issue that was closed?

rehdie commented 1 month ago

Hi @rehdie

Thank you for reporting this issue. Could you link the related issue that was closed?

done

abidhmuhsin commented 1 week ago

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.*"],

storybookjs / storybook