Storybook: Unable to integrate with angular 6.

Created on 26 Jun 2018 · 35Comments · Source: storybookjs/storybook

hey folks,
I have followed this link https://storybook.js.org/basics/guide-angular/ and try to integrate sotrybook in my angular app, my angular app version is 6.

now when I tried to npm run storybook
I got an error like below

`Using default webpack setup based on "angular-cli".
/home/smart/Tarang/Demos/storybook-demos/storybook-angular6/node_modules/webpack/lib/DefinePlugin.js:42
compiler.hooks.compilation.tap(
^

TypeError: Cannot read property 'compilation' of undefined
at DefinePlugin.apply (/home/smart/Tarang/Demos/storybook-demos/storybook-angular6/node_modules/webpack/lib/DefinePlugin.js:42:18)
at Compiler.apply (/home/smart/Tarang/Demos/storybook-demos/storybook-angular6/node_modules/@storybook/core/node_modules/tapable/lib/Tapable.js:375:16)
at webpack (/home/smart/Tarang/Demos/storybook-demos/storybook-angular6/node_modules/@storybook/core/node_modules/webpack/lib/webpack.js:33:19)
at exports.default (/home/smart/Tarang/Demos/storybook-demos/storybook-angular6/node_modules/@storybook/core/dist/server/middleware.js:29:40)
at buildDev (/home/smart/Tarang/Demos/storybook-demos/storybook-angular6/node_modules/@storybook/core/dist/server/build-dev.js:163:36)
at Object. (/home/smart/Tarang/Demos/storybook-demos/storybook-angular6/node_modules/@storybook/angular/dist/server/index.js:23:22)
at Module._compile (module.js:662:30)
at Object.Module._extensions..js (module.js:673:10)
at Module.load (module.js:575:32)
at tryModuleLoad (module.js:515:12)
at Function.Module._load (module.js:507:3)
at Module.require (module.js:606:17)
at require (internal/module.js:11:18)
at Object. (/home/smart/Tarang/Demos/storybook-demos/storybook-angular6/node_modules/@storybook/angular/bin/index.js:3:1)
at Module._compile (module.js:662:30)
at Object.Module._extensions..js (module.js:673:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] storybook: start-storybook -p 9001 -c .storybook
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] storybook script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/smart/.npm/_logs/2018-06-26T06_29_57_303Z-debug.log`

angular typescript

Source

sachdevtarang

Most helpful comment

Check your imports in stories. In my project there was wrong import applied in one story: import { storiesOf } from '@storybook/angular/src/client/preview'; instead import { storiesOf } from '@storybook/angular;.

jkalina on 4 Dec 2018

👍6 ❤1

All 35 comments

here is my repo
https://github.com/sachdevtarang/storybook-angular

sachdevtarang on 26 Jun 2018

You should use v4.0.0-alpha.10 with angular cli 6.

igor-dv on 26 Jun 2018

@igor-dv I have just upgraded to angular 6, using storybook v4.0.0-alpha.10. I am seeing these warning messages:

WARNING in ./node_modules/@angular/core/fesm5/core.js 5560:15-36
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/@storybook/angular/dist/client/preview/angular/helpers.js
 @ ./node_modules/@storybook/angular/dist/client/preview/render.js
 @ ./node_modules/@storybook/angular/dist/client/preview/index.js
 @ ./node_modules/@storybook/angular/dist/client/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

WARNING in ./node_modules/@angular/core/fesm5/core.js 5572:15-102
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/@storybook/angular/dist/client/preview/angular/helpers.js
 @ ./node_modules/@storybook/angular/dist/client/preview/render.js
 @ ./node_modules/@storybook/angular/dist/client/preview/index.js
 @ ./node_modules/@storybook/angular/dist/client/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

Separately, I am using the Angular Cli stylePreprocessorOptions feature, like:

"stylePreprocessorOptions": {
              "includePaths": ["apps/app1/src/styles"]
            },

This allows me to import css like this:

@import 'variables';

It's failing right now. Would you know the webpack config for it? Here is the error:

Module build failed (from ./node_modules/@storybook/angular/node_modules/sass-loader/lib/loader.js):

@import 'variables';
^
      File to import not found or unreadable: variables.

dereklin on 2 Jul 2018

These warnings are a known issue in angular cli. Regarding the second, can you try adding this path to the webpack's aliases?

igor-dv on 2 Jul 2018

@igor-dv I have opened this issue for the alias problem: https://github.com/storybooks/storybook/issues/3824

I have tried this as well but it didn't work: https://webpack.js.org/configuration/resolve/

My repo is at https://github.com/dereklin/nrwl-nx-workspace-demo/tree/trying-storybook-with-ng6

Please note trying-storybook-with-ng6 is the branch showing the issue

Thanks!

dereklin on 3 Jul 2018

@dereklin those warnings goes away by doing what is in this comment
https://github.com/angular/angular/issues/14898#issuecomment-404573162

VRedondo on 30 Aug 2018

I got this error: Error: Cannot find module 'babel-loader/package.json'
Anyone?

gabrielalan on 18 Oct 2018

babel-loader is a peer dep. You need to install it separately

igor-dv on 18 Oct 2018

Ahh ok sorry I didn't check it before. Thanks.
I'm now getting this error:

ERROR in ./src/styles.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/@storybook/core/node_modules/style-loader!./node_modules/css-loader??ref--17-1!./node_modules/@storybook/core/node_modules/postcss-loader/src??postcss!./src/styles.css)
Module build failed (from ./node_modules/postcss-loader/lib/index.js):
Syntax Error

(2:1) Unknown word

Should I install something else? (this is a empty new NG cli project using angular 6)

gabrielalan on 18 Oct 2018

This was fixed in the latest RC release. should be @storybook/[email protected]

igor-dv on 18 Oct 2018

Thanks, that works.

gabrielalan on 18 Oct 2018

@igor-dv
Besides babel-loader, I had to install @babel/core.

After that I get:

ERROR in /localfolder/node_modules/@storybook/angular/src/client/preview/index.d.ts
ERROR in /localfolder/node_modules/@storybook/angular/src/client/preview/index.d.ts(1,62):
TS2304: Cannot find name 'IApi'.                                              

ERROR in /localfolder/node_modules/@storybook/angular/src/client/preview/index.d.ts
ERROR in /localfolder/node_modules/@storybook/angular/src/client/preview/index.d.ts(3,47):
TS2304: Cannot find name 'IApi'.                                              

ERROR in /localfolder/node_modules/@storybook/angular/src/client/preview/index.d.ts
ERROR in /localfolder/node_modules/@storybook/angular/src/client/preview/index.d.ts(5,33):
TS2304: Cannot find name 'IStoribookSection'.

I am using rc1. I was looking for the angular examples in the mono repo but couldn't find them... I think I am missing some other dependencies?

dereklin on 18 Oct 2018

I found the example app and looking at its package.json: https://github.com/storybooks/storybook/blob/master/examples/angular-cli/package.json

There is no babel related dependency...

Right now, if I go inside node_modules/@storybook/angular/src/client/preview/index.d.ts and change the unfound types to any, storybook works...

dereklin on 18 Oct 2018

Yeah, babel/core is a peer of the babel-loader. Did you install storybook types ?

igor-dv on 19 Oct 2018

@igor-dv I tried to install @types/storybook or @types/storybook_angular but couldn't find them. Do you know the correct dependency?

dereklin on 19 Oct 2018

Btw, do you get this when running storybook or when running the app ?

igor-dv on 19 Oct 2018

This happens when I run storybook

dereklin on 19 Oct 2018

@kroeder do you have any insights?

igor-dv on 19 Oct 2018

How come the sample app doesn’t need storybook types. And it doesn’t need babel dependencies?

dereklin on 19 Oct 2018

@dereklin do you use any tsconfig strict settings?
Types for storybook are outdated but should work for most of the addons

e.g.

    "@types/storybook__addon-actions": "^3.4.1",
    "@types/storybook__addon-knobs": "^3.3.1",
    "@types/storybook__addon-links": "^3.3.2",
    "@types/storybook__addon-notes": "^3.3.3",
    "@types/storybook__react": "^3.0.9",

I've never seen the TS2304: Cannot find name 'IApi'., though.

Your repo is still https://github.com/dereklin/nrwl-nx-workspace-demo/tree/trying-storybook-with-ng6 ?

kroeder on 19 Oct 2018

I haven’t tried on that repo yet. Will try and report back.

dereklin on 19 Oct 2018

Here is my repo: https://github.com/dereklin/nrwl-nx-workspace-demo/tree/storybook-4.0-rc1

I am getting the same type problems.

Looking at this pr:

https://github.com/storybooks/storybook/pull/2959/files/1ee3e0afc81234815815c6be3937a7500ae0923e

The types are defined in https://github.com/jonrimmer/storybook/blob/1ee3e0afc81234815815c6be3937a7500ae0923e/app/angular/index.d.ts

So in https://github.com/storybooks/storybook/blob/master/app/angular/src/client/preview/index.d.ts, importing the types fixes the problem:

import { IApi, IStoribookSection } from '../../../'

dereklin on 19 Oct 2018

Works on Angular 7:

"dependencies": {
"@angular-devkit/core": "^7.0.1",
"@angular/animations": "~7.0.0",
"@angular/common": "~7.0.0",
"@angular/compiler": "~7.0.0",
"@angular/core": "~7.0.0",
"@angular/forms": "~7.0.0",
"@angular/http": "~7.0.0",
"@angular/platform-browser": "~7.0.0",
"@angular/platform-browser-dynamic": "~7.0.0",
"@angular/router": "~7.0.0",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.10.0",
"@angular/cli": "~7.0.1",
"@angular/compiler-cli": "~7.0.0",
"@angular/language-service": "~7.0.0",
"@babel/core": "^7.1.2",
"babel-loader": "^8.0.4",
"@storybook/addon-actions": "^4.0.0-rc.1",
"@storybook/addon-links": "^4.0.0-rc.1",
"@storybook/addon-notes": "^4.0.0-rc.0",
"@storybook/addons": "^4.0.0-rc.1",
"@storybook/angular": "^4.0.0-alpha.25",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^8.9.5",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.1"
}

Mooli88 on 20 Oct 2018

Ok. Upgrading to Angular 7 fixes the issues. Here is my repo in case anyone is interested: https://github.com/dereklin/nrwl-nx-workspace-demo/tree/storybook4rc1

dereklin on 20 Oct 2018

@igor-dv
Besides babel-loader, I had to install @babel/core.

After that I get:

ERROR in /localfolder/node_modules/@storybook/angular/src/client/preview/index.d.ts
ERROR in /localfolder/node_modules/@storybook/angular/src/client/preview/index.d.ts(1,62):
TS2304: Cannot find name 'IApi'.                                              

ERROR in /localfolder/node_modules/@storybook/angular/src/client/preview/index.d.ts
ERROR in /localfolder/node_modules/@storybook/angular/src/client/preview/index.d.ts(3,47):
TS2304: Cannot find name 'IApi'.                                              

ERROR in /localfolder/node_modules/@storybook/angular/src/client/preview/index.d.ts
ERROR in /localfolder/node_modules/@storybook/angular/src/client/preview/index.d.ts(5,33):
TS2304: Cannot find name 'IStoribookSection'.

I am using rc1. I was looking for the angular examples in the mono repo but couldn't find them... I think I am missing some other dependencies?

I still encounter this issue with angular 7.0.3 and storybook 4.0.4:

"dependencies": {
"@angular/animations": "~7.0.0",
"@angular/common": "~7.0.0",
"@angular/compiler": "~7.0.0",
"@angular/core": "~7.0.0",
"@angular/forms": "~7.0.0",
"@angular/http": "~7.0.0",
"@angular/platform-browser": "~7.0.0",
"@angular/platform-browser-dynamic": "~7.0.0",
"@angular/router": "~7.0.0",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.10.0",
"@angular/cli": "~7.0.4",
"@angular/compiler-cli": "~7.0.0",
"@angular/language-service": "~7.0.0",
"@babel/core": "^7.1.5",
"@storybook/angular": "^4.0.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"babel-loader": "^8.0.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.1"
}

I executed the steps described in the "Starter Guide Angular". Without modifying /localfolder/node_modules/@storybook/angular/src/client/preview/index.d.ts it does not work.

I also tried to add

"@types/storybook__addon-actions": "^3.4.1",
"@types/storybook__addon-knobs": "^3.3.1",
"@types/storybook__addon-links": "^3.3.2",
"@types/storybook__addon-notes": "^3.3.3",
"@types/storybook__react": "^3.0.9",

but without luck. Same result.

I even tried with @storybook/angular rc.1 and rc.3 both with the same result.

I am on Windows 10, Node 8.11.2.

Will there be a fix for this? Or am I still missing something? Then at least the guide should be updated. :)

mrucelum on 12 Nov 2018

@mrucelum, we are working on making the types into our repo, don't have an ETA though. But I see people above are able to run it without problems.

Anyway, If you have a reproduction I can play with to understand how to solve this, that'd be great.

@kroeder, can you suggest something as a workaround?

igor-dv on 12 Nov 2018

@storybook/addons is missing, isn't it?

I'm currently running a project with Angular 6 with

  "dependencies": {
    "@angular/core": "^6.1.0",
    "@angular/[...]": "...",
    [...]
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.1",
    "@angular-devkit/build-ng-packagr": "~0.7.1",
    "@angular-devkit/core": "^0.7.2",
    "@angular/cdk": "^6.4.1",
    "@angular/cli": "^6.1.0",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",

    "@babel/core": "^7.0.0",
    "babel-loader": "^8.0.2", // <-- not sure if this is necessary anymore, we had to add it at some point in the past

    "@storybook/addon-actions": "4.0.0-alpha.24",
    "@storybook/addon-knobs": "4.0.0-alpha.24",
    "@storybook/addon-links": "4.0.0-alpha.24",
    "@storybook/addon-notes": "4.0.0-alpha.24",
    "@storybook/addon-options": "4.0.0-alpha.24",
    "@storybook/addon-storysource": "4.0.0-alpha.24",

    "@storybook/addons": "4.0.0-alpha.24",
    "@storybook/angular": "4.0.0-alpha.24",

    "@types/storybook__addon-actions": "^3.4.1",
    "@types/storybook__addon-knobs": "^3.3.1",
    "@types/storybook__addon-links": "^3.3.2",
    "@types/storybook__addon-notes": "^3.3.3",
    "@types/storybook__react": "^3.0.9", // <--- this is because one of the addons imports stuff from react :-/ one reason why I'm working on typings stuff

  }

And an Angular 7 update branch ready with

  "dependencies": {
    "@angular/core": "~7.0.0",
    "@angular/[...]": "...",
    [...]
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.3",
    "@angular-devkit/build-ng-packagr": "~0.10.3",
    "@angular-devkit/core": "~7.0.3",
    "@angular/cdk": "~7.0.0",
    "@angular/cli": "~7.0.2",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",

    "@babel/core": "^7.0.0",
    "babel-loader": "^8.0.2",

    "@storybook/addon-actions": "^4.0.0",
    "@storybook/addon-knobs": "^4.0.0",
    "@storybook/addon-links": "^4.0.0",
    "@storybook/addon-notes": "^4.0.0",
    "@storybook/addon-options": "^4.0.0",
    "@storybook/addon-storysource": "^4.0.0",

    "@storybook/addons": "^4.0.0",
    "@storybook/angular": "^4.0.0",

    "@types/storybook__addon-actions": "^3.4.1",
    "@types/storybook__addon-knobs": "^3.3.1",
    "@types/storybook__addon-links": "^3.3.2",
    "@types/storybook__addon-notes": "^3.3.3"
  }
}

kroeder on 12 Nov 2018

@igor-dv Here is a repo from my playing around: https://github.com/mrucelum/angular-storybook-test

However, I just noticed - as I wanted to create a clean repo - that it suddenly worked! The clean one, that is.
I tried this so many times and it never worked out and now it does all of a sudden. Very strange. The linked repo however, still requires manual adaptations. I already had to remove and re-install node_modules there as well, as I couldn't make the action panel to show up at first. But even after that, it still fails without manual interference.

Maybe, I will just try again to clean out node_modules for the failing repo _again_.

@kroeder I commented out the stuff that required addons, as the starter guide also didn't really mentioned them. I guess the starter guide could use some refinement there. :)
After that it worked fine for the fresh repo I just created, but didn't for the one I created a few hours ago.

Thanks for the quick response! :)

mrucelum on 12 Nov 2018

Just checked again - removed node_modules and package-lock.json and still get the same error for the project in the repo I posted above. Hope you can also reproduce it with this repo! :)

mrucelum on 12 Nov 2018

I can confirm the type errors are back in this setting:

    "@angular/core": "7.0.3",
    "@storybook/addon-actions": "4.0.4",
    "@storybook/addon-backgrounds": "4.0.4",
    "@storybook/addon-centered": "4.0.4",
    "@storybook/addon-jest": "4.0.4",
    "@storybook/addon-knobs": "4.0.4",
    "@storybook/addon-links": "4.0.4",
    "@storybook/addon-notes": "4.0.4",
    "@storybook/addon-options": "4.0.4",
    "@storybook/addon-storyshots": "4.0.4",
    "@storybook/addon-storysource": "4.0.4",
    "@storybook/addons": "4.0.4",
    "@storybook/angular": "4.0.4",
...

dereklin on 13 Nov 2018

@igor-dv is there any update on this? the same problem happens with angular 7.1.1 + storybook 4.0.9

dereklin on 30 Nov 2018

Not yet. This looks working for different people, but anyway we will be talking about typing support tomorrow.

igor-dv on 1 Dec 2018

jkalina on 4 Dec 2018

👍6 ❤1

I did a global search and only found

import { storiesOf } from '@storybook/angular';

Didn't find any

/client/preview

reference

One thing is that I see this problem on Mac. I was able to run the similar set up without issues on Windows

dereklin on 6 Dec 2018

Intellij Idea has imported /client/preview automatically, maybe those class names should be differentiated somehow,

jkalina on 6 Dec 2018

Was this page helpful?

0 / 5 - 0 ratings

Related issues

sh: start-storybook: command not found

wahengchang · 3Comments

Not seeing stories show up in react native project. But works in reactjs

Jonovono · 3Comments

[Feature] Multiple static dirs

zvictor · 3Comments

Info addon markdown with inline code (backtick `) is broken

MrOrz · 3Comments

date knob passes timestamp (number) instead of Date object

shilman · 3Comments