question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Issue with Angular and Storybook

See original GitHub issue

Describe the bug While updating the Intro to Storybook tutorial to reflect the changes introduced in Storybook 6.2 I came across a bit of a weird issue on how Storybook is displaying the stories incorrectly. Following the steps provided in the Composite Component chapter, starting Storybook me or any other reader should get the following Storybook state. But in reality, what I got was:

https://user-images.githubusercontent.com/22988955/116573757-ff1d3680-a904-11eb-9584-187b3b02b367.mp4

The Tasklist (default and with pinned tasks) should have rendered the stories correctly but instead, they’re showing that there’s nothing. Basically treating it as it was empty.

To Reproduce

  • Clone this repo
  • Install dependencies
  • Run npm run storybook
  • In .storybook/preview.js comment out angularLegacyRendering: true,
  • Start Storybook with `npm run start-storybook``
  • Check the Default and With Pinned story under TaskList.

@ThibaudAV could you take a look please and let me know what might be the issue here. As a safeguard, I adjusted the tutorial to mention to the readers that they should add the angularLegacyRendering: true to their preview.js in order to get the correct stories showing.

Thanks in advance

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
shilmancommented, Apr 30, 2021

@ThibaudAV if you have time today let’s meet and talk this through and fix it.

0reactions
ThibaudAVcommented, Jun 3, 2021

can we close this issue ? 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Storybook for Angular tutorial
It helps you build UI components isolated from the business logic and context of your app. This edition of the Intro to Storybook...
Read more >
storybook/angular - npm
Storybook for Angular is a UI development environment for your Angular components. With it, you can visualize different states of your UI ...
Read more >
Storybook problem with inputs after upgrading angular to ...
The same issue occured on my side after upgrading from Angular 12 to Angular 13. I think this happens always when you try...
Read more >
@storybook/angular examples - CodeSandbox
Learn how to use @storybook/angular by viewing and forking @storybook/angular example apps on CodeSandbox.
Read more >
Information about `storybook` and `build-storybook` targets for ...
8 without using nx migrate and now you are having trouble with with your Angular projects using Storybook (eg. Property 'uiFramework' does not...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found