Storybook: Angular 6 and Storybook v4.0.0-alpha.13 don't work well together

[nareshbhatia]

After installing Storybook v4.0.0-alpha.13, Storybook runs fine, however my Angular 6 app has stopped working. The app has been created using Angular CLI. Now if I try to start it using ng serve, it throws the following error:

$ ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2018-07-11T03:30:07.801Z
Hash: 50081d01a055f9be783d
Time: 3131ms
chunk {main} main.js, main.js.map (main) 1.95 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 693 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 325 kB [initial] [rendered]

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,44): error TS2304: Cannot find name 'NodeRequire'.
node_modules/@storybook/angular/index.d.ts(42,65): error TS2304: Cannot find name 'NodeModule'.
src/stories/index.stories.ts(9,22): error TS2304: Cannot find name 'module'.
src/stories/index.stories.ts(14,21): error TS2304: Cannot find name 'module'.
src/stories/index.stories.ts(41,29): error TS2304: Cannot find name 'module'.
src/stories/index.stories.ts(49,29): error TS2304: Cannot find name 'module'.

｢wdm｣: Failed to compile.

[igor-dv]

Probably you need a similar solution as here

[nareshbhatia]

Yep, that works. Thanks, @igor-dv.

[bhaidar]

I am facing the same problem with Angular 7. When I run npm run storybook I get the errors below.

I've already added the exclude thing!

````
ERROR in D:/Projects/Playground/storybook-angular-applitools/node_modules/@storybook/angular/index.d.ts
ERROR in D:/Projects/Playground/storybook-angular-applitools/node_modules/@storybook/angular/index.d.ts(38,51):
TS2304: Cannot find name 'NodeModule'.

ERROR in D:/Projects/Playground/storybook-angular-applitools/node_modules/@storybook/angular/index.d.ts
ERROR in D:/Projects/Playground/storybook-angular-applitools/node_modules/@storybook/angular/index.d.ts(42,58):
TS2304: Cannot find name 'NodeModule'.

ERROR in D:/Projects/Playground/storybook-angular-applitools/src/stories/index.stories.ts
ERROR in D:/Projects/Playground/storybook-angular-applitools/src/stories/index.stories.ts(8,22):
TS2580: Cannot find name 'module'. Do you need to install type definitions for node? Try npm i @types/node.

ERROR in D:/Projects/Playground/storybook-angular-applitools/src/stories/index.stories.ts
ERROR in D:/Projects/Playground/storybook-angular-applitools/src/stories/index.stories.ts(13,21):
TS2580: Cannot find name 'module'. Do you need to install type definitions for node? Try npm i @types/node.

ERROR in D:/Projects/Playground/storybook-angular-applitools/src/stories/index.stories.ts
ERROR in D:/Projects/Playground/storybook-angular-applitools/src/stories/index.stories.ts(40,29):
TS2580: Cannot find name 'module'. Do you need to install type definitions for node? Try npm i @types/node.
i ｢wdm｣: Failed to compile.
````

[igor-dv]

Cannot find name 'NodeModule means you need to add @types/node to your configuration

[bhaidar]

@igor-dv It is already in the dev dependencies: "@types/node": "^8.9.5"

[bhaidar]

@igor-dv
This is my package.json file:

{ "name": "scss", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook" }, "private": true, "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", "node-sass": "^4.9.4", "rxjs": "~6.3.3", "zone.js": "~0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.10.0", "@angular/cli": "~7.0.2", "@angular/compiler-cli": "~7.0.0", "@angular/language-service": "~7.0.0", "@babel/core": "^7.1.2", "@storybook/addon-actions": "^4.0.0-alpha.25", "@storybook/addon-links": "^4.0.0-alpha.25", "@storybook/addon-notes": "^4.0.0-alpha.25", "@storybook/addons": "^4.0.0-alpha.25", "@storybook/angular": "^4.0.0-alpha.25", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "@types/node": "^8.9.5", "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" } }

[igor-dv]

I mean you need to add it to the types in the tsconfig

Something like this:

"compilerOptions": {
    "types": [
      "node"
    ]
  },

[bhaidar]

@igor-dv Perfect! That was it. When building the stories Node types were needed! Thanks

[bhaidar]

Hi @igor-dv
Now I am facing a new kind of errors. I created a new Angular CLI app (Angular v7) with CSS. When running Storybook, I get the following:

````

ERROR in ./src/styles.css (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./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

1 |

2 | var content = require("!!../node_modules/css-loader/index.js??ref--17-1!../node_modules/@storybook/core/node_modules/postcss-loader/src/index.js??postcss!./styles.css");
| ^
3 |
4 | if(typeof content === 'string') content = [[module.id, content, '']];

@ ./src/styles.css 2:14-383 21:1-42:3 22:19-388
@ 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 ./src/styles.css
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names __child-HtmlWebpackPlugin_0 559 KiB HtmlWebpackPlugin_0 HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/@storybook/core/node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {HtmlWebpackPlugin_0} [built]
[./node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {HtmlWebpackPlugin_0} [built]
[./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 1.62 KiB {HtmlWebpackPlugin_0} [built]
[./node_modules/lodash/lodash.js] 527 KiB {HtmlWebpackPlugin_0} [built]
i ｢wdm｣: Failed to compile.
````

[igor-dv]

What SB version are you using ?

[bhaidar]

"@storybook/angular": "^4.0.0-alpha.25",

[igor-dv]

Please try the latest rc. Do you have a custom webpack config ?

[bhaidar]

Where can I find the latest rc? No, I am not using any custom webpack.

[igor-dv]

It's 4.0.0-rc3

[bhaidar]

No matching version found for @storybook/angular@^4.0.0-rc3

[igor-dv]

https://www.npmjs.com/package/@storybook/angular/v/4.0.0-rc.3

[kroeder]

You might also check https://github.com/storybooks/storybook/issues/4481 if you can't start your angular app anymore after updating to rc.3

This is fixed in the latest CLI sb init - Existing projects have to manually do this
I have plans to make it easier for existing storybook projects but I'm still in the thinking phase 🙂
https://github.com/storybooks/storybook/issues/4486