Angular storybook library fails to compile if using workspace.json

[ZachJW34]

Expected Behavior

Storybook should work for an Angular library inside an nx workspace using a workspace.json file.

Current Behavior

Storybook compilation fails with error:

Could not find angular.json using /my-path-to-workspace/angular.json

Failure Information (for bugs)

When building storybook for Angular, storybook assumes there is an angular.json. This can be seen here.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. npx create-nx-workspace@latest repro-workspace (choose empty nx)
2. yarn add --dev @nrwl/angular
3. nx g @nrwl/angular:app my-app
4. nx g @nrwl/angular:lib my-lib
5. nx g @nrwl/angular:component components/hello-world --project my-lib
6. yarn add --dev @nrwl/storybook
7. nx g @nrwl/angular:storybook-configuration my-lib
8. nx storybook my-lib

Other

I know the problem lies with storybook for assuming angular.json, but a workspace.json file is entirely unique to Nx which is why I chose to post this issue here.

[isaacplmann]

This is an issue with @storybook/angular expecting angular.json to be in the root of the workspace. I've opened a PR that checks for workspace.json as well:
storybookjs/storybook#10881

Feel free to lobby for it to be reviewed.

[timofeysie]

That PR commit 18be1a7 was merged into the next branch 1 day ago. How to find out when it will go into a release?

[isaacplmann]

@timofeysie It looks like the PR was tagged with the 6.0 milestone. So whenever they release 6.0, we'll update the dependencies for @nrwl/storybook and everything should work.

In the meantime, you could work around this issue by renaming workspace.json to angular.json. You could even change the name back after running the storybook schematics.

[isaacplmann]

It looks like here's an issue that gives estimates of when 6.0 will be released. I'd follow that issue for updates.

[timofeysie]

Hi @isaacplmann , thanks for your replies. Changing workspace.json to angular.json didn't help.

Running the already generated storybook gave:

Error: ENOENT: no such file or directory, open 'C:\Users\timof\repos\timofeysie\clades/workspace.json'

When trying to generate a new storybook after that, I get this:

Cannot find module 'C:\Users\timof\repos\timofeysie\clades\node_modules\@angular\cli\lib\init.js'

Maybe I'm just an edge case in wanting to use React and Angular in the same repo. I'm also still not sure what the practical differences there are between using nx vs ng. I thought at first that you should be using nx for everything these days, but maybe that's not the case.

[hankchiutw]

Based on @isaacplmann's comment, I managed to use the following package.json scripts:

  "scripts": {
    "nx": "nx",
    "storybook": "run-p \"nx run project:storybook\" storybook:workaround",
    "storybook:workaround": "cp workspace.json angular.json && sleep 5 && rm angular.json",
    ...
  },
  "devDependencies": {
    "npm-run-all": "^4.1.5",
    ...
  }

and just run yarn storybook.

In my case, I have to install @angular/cli manually, otherwise, I'll get the error Cannot find module '...@angular\cli\lib\init.js'.

[RafaelVidaurre]

Got rid of the warning by updating @storybook/angular to mayor version 6. Not ideal and not sure if this can cause some other problems with nx, working so far though.

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