Configuration issues after switching to @storybook/angular builder

[TomTomB]

Current Behavior

Adding an assets array to the build-storybook configuration options results in an error.

Expected Behavior

Before the builder got switched to @storybook/angular (by #9332) this was a solution to get assets (eg. fonts) from an other app/lib to the storybook instance.
The change to use the official storybook builder should have been a breaking one and thus not released in minor.

Steps to Reproduce

• Create an angular workspace:
  npx create-nx-workspace --name=sb-issue --preset=angular --appName my-app --style css --nxCloud false

• Generate a lib:
  npm run ng generate @nrwl/angular:library --name ui --buildable true

• Add the storybook config to the lib (just say no to all prompts):
  npm run ng generate @nrwl/angular:storybook-configuration --name ui

• Add the following config to the lib's project.json inside the build-storybook target options object

        "assets": [
          {
            "input": "apps/my-app/src/assets",
            "glob": "**/*",
            "output": "assets"
          }
        ]

Sidenote: The option staticDir isnt supported either (used as a solution in #2895)

• Try to run the lib's storybook instance
  npm run ng run ui:storybook

Failure Logs

Schema validation failed with the following errors:
  Data path "" must NOT have additional properties(assets).

Environment

Node : 16.14.2
   OS   : linux x64
   yarn : 3.2.1
   
   nx : 14.3.6
   @nrwl/angular : 14.3.6
   @nrwl/cypress : 14.3.6
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.3.6
   @nrwl/eslint-plugin-nx : 14.3.6
   @nrwl/express : 14.3.6
   @nrwl/jest : 14.3.6
   @nrwl/js : 14.3.6
   @nrwl/linter : 14.3.6
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : 14.3.6
   @nrwl/nx-cloud : 14.1.3
   @nrwl/nx-plugin : Not Found
   @nrwl/react : Not Found
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.3.6
   @nrwl/web : 14.3.6
   @nrwl/workspace : 14.3.6
   typescript : 4.7.4
   ---------------------------------------
   Community plugins:
         @ngrx/effects: 14.0.0
         @ngrx/entity: 14.0.0
         @ngrx/router-store: 14.0.0
         @ngrx/store: 14.0.0
         @tomtomb/ngrx-toolkit: 3.4.1
         apollo-angular: 3.0.1
         @ngrx/schematics: 14.0.0
         @ngrx/store-devtools: 14.0.0
         @storybook/angular: 6.5.9

[mandarini]

Hi @TomTomB ! You are correct, it should not have been released in a minor release. I am really sorry that you are experiencing issues.

Here is the documentation about how you can add assets in the latest versions of Storybook. assets is no longer supported (and that was a change in Storybook rather than Nx), nor is staticDir within the target. The staticDir configuration changed in Storybook 6.4, and now you must use the staticDirs array inside your project's .storybook/main.js.

We tried making the migrator as good as possible, but it would be a bit tricky to move the assets and the staticDir's automatically, so we left that to be fixed by hand. I am really sorry that you are experiencing this issue, and I hope this helps you solve it. Again, you are correct, this change should have been made in a major version.

[TomTomB]

Hi @mandarini, thanks for your response.
I can confirm that adding the following to the .storybook/main.js resolves this issue.

staticDirs: ['../apps/my-app/src/assets']

You can decide if we want to close this one now, since it's a rather special one 🙂

[mandarini]

Oh nice! I'm very happy it works for you! I'll be closing this, since it was resolved!

[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.