Storybook: Starting angular (not storybook) does not work out-of-the-box

[kroeder]

Bug or support request summary

Starting angular (not storybook) does not work.

Steps to reproduce

npm i -g @storybook/cli@rc
npm i -g @angular/cli

ng new my-app
cd my-app

sb init
ng start

Result:

ERROR in node_modules/@storybook/angular/index.d.ts(38,51): error TS2304: Cannot find name 'NodeModule'.
node_modules/@storybook/angular/index.d.ts(42,58): error TS2304: Cannot find name 'NodeModule'.
src/stories/index.stories.ts(8,22): error TS2304: Cannot find name 'module'.
src/stories/index.stories.ts(13,21): error TS2304: Cannot find name 'module'.
src/stories/index.stories.ts(40,29): error TS2304: Cannot find name 'module'.

Please specify which version of Storybook and optionally any affected addons that you're running

• rc.1

Workaround

• Change tsconfig.app.json: Exclude all story files

  "exclude": [
    "test.ts",
    "**/*.spec.ts",
    "**/*.stories.ts"
  ]

Work summary

The reason why this happens is, that Angular might have changed something and does not support types for node out of the box.

Every Storybook-story needs e.g. module
Lets say:

storiesOf('Welcome', module).add('to Storybook', () => ({
  component: Welcome,
  props: {},
}));

Angular normally does not need module (I believe it does when using SystemJS),

Where to start

We need a way to use module in storybook (which was solved by https://github.com/storybooks/storybook/pull/4464) but not for the actual angular app.

Furthermore: The angular app should not even compile *.stories.ts files, which would solve this issue.

Who to contact

@igor-dv

[igor-dv]

I think that the better workaround it to exclude stories from the tsconfig.app.json. And the solution is to make CLI edit the tsconfig.app.json to exclude stories.

[kroeder]

I agree, Stories should be excluded per default, otherwise the angular build will be stuffed with unnecessary bytes

[kroeder]

I'd also suggest to show a warning message, kinda like this

start-storybook
> Loading tsconfig (or whatever)
! WARNING: You haven't excluded *.stories.ts files in your [path to tsconfig, taken from angular.json]. For more details see [link to code snippet and description]

In case someone just updated to the latest version and does not run sb init

Also, a timeout should be added (like 3s) to make it more visible