Storybook for Angular Library Projects

Image by Couleur from Pixabay

Scenario

We want to test our Angular library components with Storybook.

Approach

Create a new Angular project workspace with a playground application and library, then initialize Storybook.

ng new storybook-workspace --create-application=false && cd storybook-workspace
ng g library lib && ng g application playground --defaults --style=scss --routing 
npx storybook@latest init

Select the lib project for the Storybook configuration and say yes to using Compdoc for documentation.

Then run Storybook.

 ng run lib:storybook 

We can see that Storybook renders the generated sample stories for the library project.

Within our project, if we navigate to projects/lib/.storybook we see that the folder contains the Storybook configuration files for the library.

Also projects/lib/src/stories contains the generated sample stories and documentation.