storybook build error on fresh Angular CLI project

When adding Storybook to an Angular project that was created with the Angular CLI (monorepo approach with a single library), running npm run storybook produces the following error:

TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received undefined

Repro steps:

> ng new design-system --create-application=false
> cd design-system
> ng generate library pattern-lib 
> npx sb init 
> npm run storybook

Build output:

design-system@0.0.0 storybook npm run docs:json && start-storybook -p 6006

design-system@0.0.0 docs:json compodoc -p ./tsconfig.json -e json -d .

1.1.11

TypeScript version used by Compodoc : 2.9.1

TypeScript version of current project : 4.2.3

Node.js version : v12.18.3

Operating system : macOS Catalina

[09:26:42] No configuration file found, switching to CLI flags. [09:26:42] Using tsconfig file : /pocs/design-system/tsconfig.json [09:26:42] Including      : /pocs/design-system/.editorconfig [09:26:42] Including      : /pocs/design-system/.gitignore [09:26:42] Including      : /pocs/design-system/README.md [09:26:42] Including      : /pocs/design-system/angular.json [09:26:42] Including      : /pocs/design-system/package.json [09:26:42] Including      : /pocs/design-system/tsconfig.json [09:26:42] Including      : /pocs/design-system/.storybook/main.js [09:26:42] Including      : /pocs/design-system/.storybook/preview.js [09:26:42] Including      : /pocs/design-system/.storybook/tsconfig.json [09:26:42] Ignoring       : /pocs/design-system/.storybook/typings.d.ts [09:26:42] Including      : /pocs/design-system/stories/Button.stories.ts [09:26:42] Including      : /pocs/design-system/stories/Header.stories.ts [09:26:42] Including      : /pocs/design-system/stories/Page.stories.ts [09:26:42] Including      : /pocs/design-system/stories/Introduction.stories.mdx [09:26:42] Including      : /pocs/design-system/stories/button.component.ts [09:26:42] Including      : /pocs/design-system/stories/button.css [09:26:42] Including      : /pocs/design-system/stories/header.component.ts [09:26:42] Including      : /pocs/design-system/stories/header.css [09:26:42] Including      : /pocs/design-system/stories/page.component.ts [09:26:42] Including      : /pocs/design-system/stories/page.css [09:26:42] Including      : /pocs/design-system/projects/pattern-lib/README.md [09:26:42] Including      : /pocs/design-system/projects/pattern-lib/package.json [09:26:42] Including      : /pocs/design-system/projects/pattern-lib/karma.conf.js [09:26:42] Including      : /pocs/design-system/projects/pattern-lib/ng-package.json [09:26:42] Including      : /pocs/design-system/projects/pattern-lib/tsconfig.lib.json [09:26:42] Including      : /pocs/design-system/projects/pattern-lib/tsconfig.lib.prod.json [09:26:42] Including      : /pocs/design-system/projects/pattern-lib/tsconfig.spec.json [09:26:42] Including      : /pocs/design-system/stories/assets/colors.svg [09:26:42] Including      : /pocs/design-system/stories/assets/code-brackets.svg [09:26:42] Including      : /pocs/design-system/stories/assets/comments.svg [09:26:42] Including      : /pocs/design-system/stories/assets/flow.svg [09:26:42] Including      : /pocs/design-system/stories/assets/direction.svg [09:26:42] Including      : /pocs/design-system/stories/assets/plugin.svg [09:26:42] Including      : /pocs/design-system/stories/assets/repo.svg [09:26:42] Including      : /pocs/design-system/stories/assets/stackalt.svg [09:26:42] Including      : /pocs/design-system/projects/pattern-lib/src/public-api.ts [09:26:42] Including      : /pocs/design-system/projects/pattern-lib/src/test.ts [09:26:42] Ignoring       : /pocs/design-system/projects/pattern-lib/src/lib/pattern-lib.component.spec.ts [09:26:42] Including      : /pocs/design-system/projects/pattern-lib/src/lib/pattern-lib.component.ts [09:26:42] Ignoring       : /pocs/design-system/projects/pattern-lib/src/lib/pattern-lib.service.spec.ts [09:26:42] Including      : /pocs/design-system/projects/pattern-lib/src/lib/pattern-lib.module.ts [09:26:42] Including      : /pocs/design-system/projects/pattern-lib/src/lib/pattern-lib.service.ts [09:26:42] Searching package.json file [09:26:42] package.json file found [09:26:42] Processing package.json dependencies [09:26:42] Searching README.md, CHANGELOG.md, CONTRIBUTING.md, LICENSE.md, TODO.md files [09:26:42] README.md file found [09:26:42] Error during /pocs/design-system/CHANGELOG read [09:26:42] Continuing without CHANGELOG.md file [09:26:42] Error during /pocs/design-system/CONTRIBUTING read [09:26:42] Continuing without CONTRIBUTING.md file [09:26:42] Error during /pocs/design-system/LICENSE read [09:26:42] Continuing without LICENSE.md file [09:26:42] Error during /pocs/design-system/TODO read [09:26:42] Continuing without TODO.md file [09:26:42] Get dependencies data [09:26:42] parsing        : /pocs/design-system/stories/Button.stories.ts [09:26:42] parsing        : /pocs/design-system/stories/Header.stories.ts [09:26:42] parsing        : /pocs/design-system/stories/Page.stories.ts [09:26:42] parsing        : /pocs/design-system/stories/button.component.ts [09:26:42] found          : ButtonComponent [09:26:42] parsing        : /pocs/design-system/stories/header.component.ts [09:26:42] found          : HeaderComponent [09:26:42] parsing        : /pocs/design-system/stories/page.component.ts [09:26:42] found          : PageComponent [09:26:42] parsing        : /pocs/design-system/projects/pattern-lib/src/public-api.ts [09:26:42] parsing        : /pocs/design-system/projects/pattern-lib/src/test.ts [09:26:42] parsing        : /pocs/design-system/projects/pattern-lib/src/lib/pattern-lib.component.ts [09:26:42] found          : PatternLibComponent [09:26:42] parsing        : /pocs/design-system/projects/pattern-lib/src/lib/pattern-lib.module.ts [09:26:42] found          : PatternLibModule [09:26:42]                : - exports: [09:26:42]                : - PatternLibComponent [09:26:42]                : - declarations: [09:26:42]                : - PatternLibComponent [09:26:42] parsing        : /pocs/design-system/projects/pattern-lib/src/lib/pattern-lib.service.ts [09:26:42] found          : PatternLibService [09:26:42] ------------------- [09:26:42] Project statistics  [09:26:42] - files      : 39 [09:26:42] - module     : 1 [09:26:42] - component  : 4 [09:26:42] - injectable : 1 [09:26:42] ------------------- [09:26:42] Prepare components [09:26:42]  ButtonComponent has styleUrls, include them [09:26:42]  HeaderComponent has styleUrls, include them [09:26:42]  PageComponent has styleUrls, include them [09:26:42] Prepare modules [09:26:42] Prepare injectables [09:26:42] Prepare miscellaneous [09:26:42] Process documentation coverage report [09:26:42] Generating documentation in export format json [09:26:42] Documentation generated in ./ in 0.214 seconds info @storybook/angular v6.2.9 info  info => Loading presets info => Loading 1 config file in “/pocs/design-system/.storybook” info => Loading 7 other files in “/pocs/design-system/.storybook” info => Adding stories defined in “/pocs/design-system/.storybook/main.js” info => Using prebuilt manager info => Found custom tsconfig.json info => Using implicit CSS loaders info => Using angular project ‘pattern-lib’ for configuring Storybook. ERR! TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received undefined ERR!     at validateString (internal/validators.js:120:11) ERR!     at Object.resolve (path.js:980:7) ERR!     at Object.getAngularCliWebpackConfigOptions (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-cli_config.js:120:39) ERR!     at Object.webpackFinal (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-cli.js:8:56) ERR!     at /pocs/design-system/node_modules/@storybook/core-common/dist/cjs/presets.js:274:28 ERR!  TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received undefined ERR!     at validateString (internal/validators.js:120:11) ERR!     at Object.resolve (path.js:980:7) ERR!     at Object.getAngularCliWebpackConfigOptions (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-cli_config.js:120:39) ERR!     at Object.webpackFinal (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-cli.js:8:56) ERR!     at /pocs/design-system/node_modules/@storybook/core-common/dist/cjs/presets.js:274:28 { ERR!   code: ‘ERR_INVALID_ARG_TYPE’ ERR! }

[mfrancekovic]

@fikkatra @shilman I’ve managed to make it work by just adding tsConfig to the angular.json like this 👇

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "project": "projects/my-lib/ng-package.json",
            "tsConfig": "projects/my-lib/tsconfig.lib.json" <= this line made it work.
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/my-lib/tsconfig.lib.prod.json"
            },
            "development": {
              "tsConfig": "projects/my-lib/tsconfig.lib.json"
            }
          },
          "defaultConfiguration": "production"
        },

It seems like the storybook builder doesn’t know to take into account the defaultConfiguration from the angular.json.

[literalpie]

I think this issue should be reopened. Storybook should handle the case where tsConfig isn’t included in the options - especially since is the default when you create a new angular project