Angular 8 with Storybook 6

Question

Getting the below error while installing and starting a storybook.

ERROR in /Users/username/angular-storybook/src/stories/Button.stories.ts
ERROR in /Users/username/angular-storybook/src/stories/Button.stories.ts(2,29):
TS2307: Cannot find module '@storybook/angular/types-6-0'.

ng version

Angular CLI: 8.3.29
Node: 12.16.2
OS: darwin x64
Angular: 8.2.14

Dev dependency

    "@compodoc/compodoc": "^1.1.11",
    "@storybook/addon-actions": "^6.0.12",
    "@storybook/addon-essentials": "^6.0.12",
    "@storybook/addon-links": "^6.0.12",
    "@storybook/angular": "^6.0.12"

Redware

Answer 1

As a workaround, I have updated the imports from Button, Header, Page{.stories}:

From --->
import { Story, Meta } from '@storybook/angular/types-6-0';

To  ---->
import { Story, Meta } from '@storybook/angular';

This works fine. But not sure why the boilerplate code has the issue. :( This works fine with version 6.0.12.

Updates: With newer version of the storybook(>6.2.*), Explicitly declare in typings.d.ts inside the .storybook directory. (mentioned by @Mr.7)

declare module '@storybook/angular'

Redware

Thanks for this, saved me some headache and I appreciate it :) – Jacquez

Answer 2

In my case, I tried Subhakant's workaround but that didn't work for me. After some research I found this.

The explicit declaration in typings.d.ts inside .storybook directory made it work

declare module '@storybook/angular'

Oviparous

Answer 3

For me none of this worked. I used npx sb init to add storybook to an existing Angular 6 project. Sadly it did not set up storybook correctly and I received the same error as OP, yet none of the solutions here worked for me. Finally I realized, that my typescript version was outdated (3.8.4) but the setup was for TS 3.9. I updated typescript to 3.10.4 everything works now.

Slap