Upgrading to Storybook(v 6.3) for Angular 12

storybook: https://storybook.js.org/docs/angular/get-started/introduction

This article has few straight forward fixes which the migration document failed to mention or the fixes are in some other documents.

Step 1: Storybook Package upgrade

npx sb upgrade

Step 2: Angular and dependency Package upgrade

ng update @angular/core@12 @angular/cli@12
**If you are using angular material**
ng update @angular/material

Now lets come to the issues:

• when you run the project following the migration guide…

Fix:

in your .storybook/main.js add

core: {
builder: ‘webpack5’,
},

Second Issue:

Fix:

npm install @storybook/builder-webpack5@next @storybook/manager-webpack5@next — save-dev

• Error related to localize, even if you have proper configuration in your polyfills.ts file

Fix:

• import localize in you config.js/preview.js file inside .storybook

import '@angular/localize/init';

That’s all 🥳

Now run the project and enjoy all new cool features.

Official Storybook migration guide

https://storybook.js.org/blog/storybook-6-migration-guide/

Whats new in storybook 6.3

https://storybook.js.org/blog/storybook-6-3/