Storybook startup fails for Angular

[codeNoobie]

Describe the bug
I am trying to migrate to V5 of storybook. We are using Angular in our repo. When I start the storybook, it gives warning that it is unable to load angular-cli config.
After this, the storybook complains that it is unable to find my local library inside the story. This library is my local library which we publish from our repo.

To Reproduce

1. Add storybook to angular cli app.
2. Start storybook

I have reproduced this issue in the storybook/example/angular-cli app as well.

Here is the error log from there.

info => Loading presets
info => Found custom tsconfig.json
info => Loading angular-cli config.
node-pre-gyp WARN => Failed to get angular-cli webpack config.
node-pre-gyp info => Loading custom webpack config (full-control mode).
node-pre-gyp info => Loading angular-cli config.
node-pre-gyp WARN => Failed to get angular-cli webpack config.
node-pre-gyp ERR! TypeError: Cannot read property 'module' of undefined
node-pre-gyp ERR!     at Object.<anonymous> (/Users/anand.tiwary/practice/storybook/storybook/examples/angular-cli/.storybook/webpack.config.ts:4:10)
node-pre-gyp ERR!     at step (/Users/anand.tiwary/practice/storybook/storybook/examples/angular-cli/.storybook/webpack.config.ts:31:23)
node-pre-gyp ERR!     at Object.next (/Users/anand.tiwary/practice/storybook/storybook/examples/angular-cli/.storybook/webpack.config.ts:12:53)
node-pre-gyp ERR!     at /Users/anand.tiwary/practice/storybook/storybook/examples/angular-cli/.storybook/webpack.config.ts:6:71
node-pre-gyp ERR!     at new Promise (<anonymous>)
node-pre-gyp ERR!     at __awaiter (/Users/anand.tiwary/practice/storybook/storybook/examples/angular-cli/.storybook/webpack.config.ts:2:12)
node-pre-gyp ERR!     at module.exports (/Users/anand.tiwary/practice/storybook/storybook/examples/angular-cli/.storybook/webpack.config.ts:40:12)
node-pre-gyp ERR!     at Object.webpack (/Users/anand.tiwary/practice/storybook/storybook/lib/core/dist/server/preview/custom-webpack-preset.js:52:12)
node-pre-gyp ERR!     at <anonymous>
node-pre-gyp ERR!     at process._tickCallback (internal/process/next_tick.js:188:7)
node-pre-gyp ERR!  { TypeError: Cannot read property 'module' of undefined
node-pre-gyp ERR!     at Object.<anonymous> (/Users/anand.tiwary/practice/storybook/storybook/examples/angular-cli/.storybook/webpack.config.ts:4:10)
node-pre-gyp ERR!     at step (/Users/anand.tiwary/practice/storybook/storybook/examples/angular-cli/.storybook/webpack.config.ts:31:23)
node-pre-gyp ERR!     at Object.next (/Users/anand.tiwary/practice/storybook/storybook/examples/angular-cli/.storybook/webpack.config.ts:12:53)
node-pre-gyp ERR!     at /Users/anand.tiwary/practice/storybook/storybook/examples/angular-cli/.storybook/webpack.config.ts:6:71
node-pre-gyp ERR!     at new Promise (<anonymous>)
node-pre-gyp ERR!     at __awaiter (/Users/anand.tiwary/practice/storybook/storybook/examples/angular-cli/.storybook/webpack.config.ts:2:12)
node-pre-gyp ERR!     at module.exports (/Users/anand.tiwary/practice/storybook/storybook/examples/angular-cli/.storybook/webpack.config.ts:40:12)
node-pre-gyp ERR!     at Object.webpack (/Users/anand.tiwary/practice/storybook/storybook/lib/core/dist/server/preview/custom-webpack-preset.js:52:12)
node-pre-gyp ERR!     at <anonymous>
node-pre-gyp ERR!     at process._tickCallback (internal/process/next_tick.js:188:7)
node-pre-gyp ERR!   stack: 'TypeError: Cannot read property \'module\' of undefined\n    at Object.<anonymous> (/Users/anand.tiwary/practice/storybook/storybook/examples/angular-cli/.storybook/webpack.config.ts:4:10)\n    at step (/Users/anand.tiwary/practice/storybook/storybook/examples/angular-cli/.storybook/webpack.config.ts:31:23)\n    at Object.next (/Users/anand.tiwary/practice/storybook/storybook/examples/angular-cli/.storybook/webpack.config.ts:12:53)\n    at /Users/anand.tiwary/practice/storybook/storybook/examples/angular-cli/.storybook/webpack.config.ts:6:71\n    at new Promise (<anonymous>)\n    at __awaiter (/Users/anand.tiwary/practice/storybook/storybook/examples/angular-cli/.storybook/webpack.config.ts:2:12)\n    at module.exports (/Users/anand.tiwary/practice/storybook/storybook/examples/angular-cli/.storybook/webpack.config.ts:40:12)\n    at Object.webpack (/Users/anand.tiwary/practice/storybook/storybook/lib/core/dist/server/preview/custom-webpack-preset.js:52:12)\n    at <anonymous>\n    at process._tickCallback (internal/process/next_tick.js:188:7)' }

Expected behavior
It should be able to load angular cli config and tsconfig path mapping for local angular development libraries.

System:

• OS: [e.g. iOS, Windows10, MacOS] MacOS
• Device: [e.g. iPhoneX, Macbook Pro 2018] Macbook Pro 2018
• Browser: [e.g. chrome, safari] Both
• Framework: [e.g. react, vue, angular] angular
• Addons: [if relevant]
• Version: [e.g. 4.0.0] 5.0.5

Additional context
Add any other context about the problem here.

[shilman]

How did you reproduce this in examples/angular-cli? The following works for me:

git co master
yarn bootstrap --reset --core
cd examples/angular-cli
yarn storybook

[codeNoobie]

I ran yarn install and then yarn storybook in the example folder (This is also what we usually run for my angular project).

I tried your above steps in your storybook/examples/angular-cli example and it worked for me as well. It was able to find tsconfig and angular cli webpack config.

What are these commands doing extra which is not covered by yarn install and yarn storybook? Do I need to run any other bootstrap command to make it run for my local project?

I am on Angular 6

[shilman]

Hmm @codeNoobie. Those commands I ran are for building storybook and getting angular-cli to run with the freshly-built packages on your local machine.

I tried getting the examples/angular-cli working with the packages from NPM and it worked for me after a few tricks:

cp -r examples/angular-cli ~/tmp
cd ~/tmp/angular-cli
rm jest.addon-config.js src/stories/addon-jest.stories.ts
# didn't work for me and i didn't bother figuring out why -- something to do with the storybook project structure
yarn install
yarn storybook

[hellotusharkhanna]

I faced same issue:
Change (baseConfig, env, config) to { config } in storybook webpack.config

[shilman]

Yippee!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.31 containing PR #6535 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Yee-haw!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.11 containing PR #6535 that references this issue. Upgrade today to try it out!