Integrate Angular 16 library with storybook

/ BLOG, UI Development / By /

This article will show you how to integrate angular 16 project with storybook.js, storybook is great tool to preview/develop web components for your needs

Install angular cli globally

npm install -g @angular/cli

Check angular cli version

ng version

Create angular library with cli command

ng new your-workspace --no-create-application

Generate your first library

cd your-workspace      
ng generate library my-lib

Your project structure should be like this, example as below:

Integrate with storybook

Run below command under your-workspace root folder to integrate with storybook.

npx storybook@latest init

Run storybook

Run below command to start storybook, default port for storybook is 6006, all your stories can be accessed via http://localhost:6006

ng run my-lib:storybook

Now you have storybook successful integrated, more configuration like global styling, mock data, third party libraries can be found at storybook official site.

Upgrade storybook

If you need to upgrade storybook to latest version, run below command

npx storybook@latest upgrade

Reference

Scroll to Top