Angular Nx Storybook with Storybook Docs for Angular addon throwing error ./tsconfig.json not found

Question

I have developed an angular library using Nx and i am trying to create documentation using this add on for storybook https://github.com/storybookjs/storybook/blob/next/addons/docs/angular/README.md

i have added addon like this to my main.js file under .storybook folder

module.exports = {
  addons: ['@storybook/addon-docs'],
};

i have installed @compodoc/compodoc and i have added following section to package.json file

{
  ...
  "scripts": {
    "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
    "storybook": "npm run docs:json && start-storybook -p 6006 -s src/assets",
    ...
  },
}

I added following section to .storybook/preview.js file as well

import { setCompodocJson } from '@storybook/addon-docs/angular';
import docJson from '../documentation.json';
setCompodocJson(docJson);

Once i do npm run storybook it gives me following error

"./tsconfig.json" file was not found in the current directory

Failed at the docs:json script.

Answer 1

ok finally i found the issue the path should be as follows:

it should be ../../../tsconfig.json instead of ./tsconfig.json

basically . points to the folder where your preview.js is.

{
  ...
  "scripts": {
    "docs:json": "compodoc -p ../../../tsconfig.json -e json -d .",
    "storybook": "npm run docs:json && start-storybook -p 6006 -s src/assets",
    ...
  },
}