Storybook build fails when following the tutorials

[mbeckenbach]

Current Behavior

I tried to add storybook to some ui libs but it failed, so I created a new workspace with one angular app, a workspace lib and an angular lib. It follows the example of your angular tutorial except, that there is no backend app. But i still get the same errors.

Then i added storybook for the UI lib as it is described here:
https://nx.dev/storybook/overview-angular

When i run nx run ui:storybook it crashes with this error:

/apps/todos/src/polyfills.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

Now what surprises me a lot is, that it seams to look for the polyfills.ts in the todos app. So outside of the ui lib boundaries.
As far as i understand this setup, it should not break the boundaries of this lib in my scenario. I mean the whole Idea of using storybook is to build components in isolation, right?

Expected Behavior

Storybook should launch...

Steps to Reproduce

I pushed my example project here: https://github.com/mbeckenbach/nxsbissue

Failure Logs

> nx run ui:storybook 
assets by chunk 5.01 MiB (id hint: vendors)
  assets by status 4.63 MiB [big]
    asset 921.manager.bundle.js 4.27 MiB [emitted] [big] (id hint: vendors)
    asset 331.manager.bundle.js 371 KiB [emitted] [big] (id hint: vendors)
  asset 278.manager.bundle.js 189 KiB [emitted] (id hint: vendors)
  asset 574.manager.bundle.js 113 KiB [emitted] (id hint: vendors)
  asset 881.manager.bundle.js 68.9 KiB [emitted] (id hint: vendors)
  asset 459.manager.bundle.js 15.3 KiB [emitted] (id hint: vendors)
asset runtime~main.manager.bundle.js 14.1 KiB [emitted] (name: runtime~main)
asset index.html 2.56 KiB [emitted]
asset 295.manager.bundle.js 1.2 KiB [emitted]
asset main.manager.bundle.js 783 bytes [emitted] (name: main)
Entrypoint main [big] 4.28 MiB = runtime~main.manager.bundle.js 14.1 KiB 921.manager.bundle.js 4.27 MiB main.manager.bundle.js 783 bytes
orphan modules 1.51 MiB [orphan] 319 modules
runtime modules 8.67 KiB 14 modules
javascript modules 4.6 MiB 893 modules
json modules 1.52 KiB
  ./node_modules/character-entities-legacy/index.json 1.24 KiB [built] [code generated]
  ./node_modules/character-reference-invalid/index.json 289 bytes [built] [code generated]
manager (webpack 5.65.0) compiled successfully in 7052 ms
webpack built preview 442f0581180ee4659262 in 9573ms
ModuleBuildError: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: /Users/me/Source/play/acme/apps/todos/src/polyfills.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /Users/me/Source/play/acme/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/Users/me/Source/play/acme/node_modules/webpack/lib/NormalModule.js:751:19)
    at /Users/me/Source/play/acme/node_modules/webpack/lib/NormalModule.js:853:5
    at /Users/me/Source/play/acme/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/me/Source/play/acme/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Users/me/Source/play/acme/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /Users/me/Source/play/acme/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17


———————————————————————————————————————————————

>  NX   ERROR  Running target "ui:storybook" failed

  Failed tasks:
  
  - ui:storybook
  
  Hint: run the command with --verbose for more details.

Environment

>  NX  Report complete - copy this into the issue template

  Node : 14.18.2
  OS   : darwin arm64
  npm  : 6.14.15
  
  nx : 13.4.4
  @nrwl/angular : 13.4.4
  @nrwl/cli : 13.4.4
  @nrwl/cypress : 13.4.4
  @nrwl/devkit : 13.4.4
  @nrwl/eslint-plugin-nx : 13.4.4
  @nrwl/express : undefined
  @nrwl/jest : 13.4.4
  @nrwl/linter : 13.4.4
  @nrwl/nest : undefined
  @nrwl/next : undefined
  @nrwl/node : undefined
  @nrwl/nx-cloud : undefined
  @nrwl/react : undefined
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.4.4
  @nrwl/web : undefined
  @nrwl/workspace : 13.4.4
  @nrwl/storybook : 13.4.4
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 7.4.0
  ---------------------------------------
  Community plugins:
  	 @angular/animations: 13.1.2
  	 @angular/common: 13.1.2
  	 @angular/compiler: 13.1.2
  	 @angular/core: 13.1.2
  	 @angular/forms: 13.1.2
  	 @angular/platform-browser: 13.1.2
  	 @angular/platform-browser-dynamic: 13.1.2
  	 @angular/router: 13.1.2
  	 @angular-devkit/build-angular: 13.1.3
  	 @angular/cli: 13.1.3
  	 @angular/compiler-cli: 13.1.2
  	 @angular/language-service: 13.1.2
  	 @storybook/angular: 6.4.12

[hudzenko]

Add "projectBuildConfig": "your-app-or-lib:build-storybook" to storybook build option. This is a known bug and should be fixed soon by storybook team :)

[mbeckenbach]

@hudzenko THX!

[marleypowell]

I think this is the related issue #8199

[mandarini]

Thank you all for helping out @mbeckenbach ! A fix will land soon! :)

[mandarini]

Closing this since it's a duplicate, ok?

[mandarini]

I promise to re-open if it persists

[mbeckenbach]

@mandarini sure, thanks.

[mandarini]

New docs for styles and stylePreprocessorOptions

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.