storybook: Unable to install @storybook/angular to a new Angular project.

Describe the bug Running npm install @storybook/angular --save-dev or npx -p @storybook/cli sb init --type angular in a new Angular application always fails.

To Reproduce Create a new Angular application using angular-cli and try to install @storybook/angular:

$ ng new test-storybook
$ cd test-storybook
$ npm install @storybook/angular --save-dev

npm WARN deprecated core-js@1.2.7: core-js@<2.6.5 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.
...
@babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-unicode-regex@7.4.4 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.

npm ERR! path C:\Users\user\git\test-storybook\node_modules\array.prototype.flat
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename 'C:\Users\user\git\test-storybook\node_modules\array.prototype.flat' -> 'C:\Users\user\git\test-storybook\node_modules\.array.prototype.flat.DELETE'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user\AppData\Roaming\npm-cache\_logs\2019-05-16T19_55_34_727Z-debug.log

Expected behavior npm i should not fail and should install @storybook/angular.

Code snippets package.json generated by angular-cli:

{
  "name": "test-storybook",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.8",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.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.2.2"
  }
}

System:

  • OS: Windows10
  • Device: ThinkPad T480s
  • Browser: N/A
  • Framework: angular
  • Addons: N/A
  • Version: latest

Additional context Node version: v11.15.0 NPM version: 6.7.0 The error was the same with Node 10.15.3. I also tried different versions of @storybook/angular including next but the result is always the same.

Angular CLI version:

Angular CLI: 7.3.9
Node: 11.15.0
OS: win32 x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.13.9
@angular-devkit/build-angular      0.13.9
@angular-devkit/build-ng-packagr   0.13.9
@angular-devkit/build-optimizer    0.13.9
@angular-devkit/build-webpack      0.13.9
@angular-devkit/core               7.3.9
@angular-devkit/schematics         7.3.9
@angular/cdk                       7.3.7
@angular/cli                       7.3.9
@angular/material                  7.3.7
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.3.9
@schematics/angular                7.3.9
@schematics/update                 0.13.9
ng-packagr                         4.7.1
rxjs                               6.5.2
typescript                         3.2.4
webpack                            4.29.0

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 1
  • Comments: 24 (7 by maintainers)

Most upvoted comments

@guillermoarellano : Thanks! That did the trick!

For others reading this, here are exact commands to downgrade:

npm install @angular/cli@8.2
npm install @angular-devkit/build-angular@0.802

…which currently results in this change in package.json

  "devDependencies": {
    "@angular-devkit/build-angular": "^0.802.2",
    "@angular/cli": "^8.2.2",

…and this happy picture: image

+13
asinitson on Sep 9, 2019

@asinitson @marchino21 I recently upgraded my version of Angular and it broke Storybook. I would recommend you downgrade your CLI version to 8.2.0 and the devkit 0.802.0. That fixed it for me. See this comment – https://github.com/storybookjs/storybook/issues/7877#issuecomment-525833864

+7
guillermoarellano on Sep 7, 2019

Can confirm the above error.

This seems to be fixed in @next

npx -p @storybook/cli@next sb init --type angular

although there’s another error in next

ERROR in D:/04_Development/ng-projects/sb-ngcli820/node_modules/@storybook/angular/dist/client/preview/index.d.ts
ERROR in D:/04_Development/ng-projects/sb-ngcli820/node_modules/@storybook/angular/dist/client/preview/index.d.ts(2,23):
TS2688: Cannot find type definition file for 'webpack-env'.

A workaround for next is to set skibLibCheck: true in .storybook/tsconfig.json We need to figure out the changes in 5.2.0 that might have solved this issue

We also need to figure out why webpack-env makes trouble in 5.2.0-beta

+4
kroeder on Aug 7, 2019

I think the problem is the new version of zone.js in Angular 8. I get this error when I try to upgrade my existing project from 7 to 8

image

+3
lslocum on May 29, 2019

Did anyone get this to work? By work I mean did anyone manage to do something useful with the tool beyond compiling a sample?

This is what I did:

  1. Initialized the latest versions (Angular 8.2.4, Storybook RC.5.2.0-rc.5 at this point):
PROJECT=angular-storybook-love-story
npx -p @angular/cli@ ng new --defaults=true $PROJECT
cd $PROJECT
npx -p @storybook/cli@next sb init --type angular
  1. Added "skipLibCheck": true to .storybook/tsconfig.json
{
  "extends": "../tsconfig.app.json",
  "compilerOptions": {
    "skipLibCheck": true,
  1. Autogenerated dummy component without any @Input/@Output
node_modules/.bin/ng g component dummy
  1. Create story with a component
import { storiesOf } from '@storybook/angular';
import { DummyComponent } from 'src/app/dummy/dummy.component';

storiesOf('Dummy `y u no work` component', module)
  .add('generated with `ng g component dummy`', () => ({
    component: DummyComponent,
    props: { }
  }));

And this is sad result I get (Chrome and Firefox):

image

This is what seems to be the most meaningful part of the error message:

vendors~main.a5582890b64b0d655bfc.bundle.js:170749 Unhandled Promise rejection: Expected 'styles' to be an array of strings. ; Zone: <root> ;

Any hints how to get further? I would really like to start examining my components, but each time I try Storybook with Angular I cannot get far.

+2
asinitson on Sep 4, 2019

@bzkny Maybe you already caught this, but:

  • skibLibCheck evidently had a typo and should’ve been skipLibCheck
  • skipLibCheck goes in the compilerOptions not directly in the top level of tsconfig.json

I put "skipLibCheck": true in compilerOptions and the build stopped failing.

+2
nategreen on Aug 19, 2019

Seems to be broken again somewhere after Angular 8.0.1.

Steps to reproduce:

VERSION=8.2.0
PROJECT=angular-eight-two-zero
npx -p @angular/cli@$VERSION ng new --defaults=true $PROJECT
cd $PROJECT
npx -p @storybook/cli sb init --type angular

After this running npm start and npm run storybook you can see this: image

If you substitute first two envrionment variables to:

VERSION=8.0.1
PROJECT=angular-eight-zero-one

…then you get to the happy end: image

Not sure what to do with this one. I really wanted to try the tool out, but I don’t feel like downgrading my Angular project. Any workaround for Angular 8.2.0?

+2
asinitson on Aug 5, 2019

Hello,

I’m facing an issue while trying to add storybook to an existing project.

The project runs:

"@angular-devkit/build-angular": "~0.901.9",
    "@angular-devkit/build-ng-packagr": "~0.901.9",
    "@angular/animations": "~9.1.11",
    "@angular/cli": "~9.1.9",
    "@angular/common": "~9.1.11",
    "@angular/compiler": "~9.1.11",
    "@angular/compiler-cli": "~9.1.11",
    "@angular/core": "~9.1.11",
    "@angular/forms": "~9.1.11",
    "@angular/language-service": "~9.1.11",
    "@angular/platform-browser": "~9.1.11",
    "@angular/platform-browser-dynamic": "~9.1.11",
    "@angular/router": "^9.1.11",
    "@ngrx/effects": "~8.6.0",
    "@ngrx/store": "~8.6.0",
    "@types/express": "^4.17.1",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",

Trying to install using: npx sb init but I’m getting the following error:

$ npx -p @storybook/cli sb init --type angular
####......] - postinstall: info lifecycle @storybook/cli@6.3.2~postinstall: @storybook/cli@6.3.2pes@7.14.5
sb init - the simplest way to add a Storybook to your project. 

• Installing Storybook for user specified project type. ✓
• Adding Storybook support to your "Angular" app
    TypeError: Invalid Version: undefined
   at new SemVer (C:\Users\UX159567\AppData\Roaming\npm-cache\_npx\47868\node_modules\@storybook\cli\node_modules\@storybook\semver\classes\semver.js:72:13)
   at compare (C:\Users\UX159567\AppData\Roaming\npm-cache\_npx\47868\node_modules\@storybook\cli\node_modules\@storybook\semver\functions\compare.js:6:10)
   at Object.gte (C:\Users\UX159567\AppData\Roaming\npm-cache\_npx\47868\node_modules\@storybook\cli\node_modules\@storybook\semver\functions\gte.js:6:10)
   at generator (C:\Users\UX159567\AppData\Roaming\npm-cache\_npx\47868\node_modules\@storybook\cli\dist\cjs\generators\ANGULAR\index.js:53:38)
   at runGenerator (C:\Users\UX159567\AppData\Roaming\npm-cache\_npx\47868\node_modules\@storybook\cli\dist\cjs\initiate.js:169:37)
   at installStorybook (C:\Users\UX159567\AppData\Roaming\npm-cache\_npx\47868\node_modules\@storybook\cli\dist\cjs\initiate.js:223:10)
   at _default (C:\Users\UX159567\AppData\Roaming\npm-cache\_npx\47868\node_modules\@storybook\cli\dist\cjs\initiate.js:296:10)
   at Command.<anonymous> (C:\Users\UX159567\AppData\Roaming\npm-cache\_npx\47868\node_modules\@storybook\cli\dist\cjs\generate.js:38:696)
   at Command.listener [as _actionHandler] (C:\Users\UX159567\AppData\Roaming\npm-cache\_npx\47868\node_modules\@storybook\cli\node_modules\commander\index.js:426:31)
   at Command._parseCommand (C:\Users\UX159567\AppData\Roaming\npm-cache\_npx\47868\node_modules\@storybook\cli\node_modules\commander\index.js:1002:14) 
   ```
+1
thiagosbrito on Jul 2, 2021

Hello, I’ve got same issue as @asinitson and also if I remove styleUrls for component I get The template specified for componen is not a string

+1
vasyl-trs on Sep 6, 2019

I force upgraded to Angular 8 and had no issues with storybook.

+1
lslocum on Jul 2, 2019

Sorry, I just realized I was replying to a subthread about upgrading, but this issue is about new installs. I created a separate issue for upgrading: https://github.com/storybookjs/storybook/issues/6951

+1
brianmcd on Jun 3, 2019

I couldn’t reproduce it

npm i -g @storybook/cli @angular/cli
ng new angular-storybook-test
cd angular-storybook-test
sb init
npm run storybook

╭────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 5.1.0-rc.3 started                     │
│   14 s for manager and 15 s for preview            │
│                                                    │
│   Local:            http://localhost:6006/         │
│   On your network:  http://192.168.178.20:6006/    │
│                                                    │
╰────────────────────────────────────────────────────╯

Storybook version

5.1.0-rc.3

Angular version

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.0.1
Node: 10.15.3
OS: win32 x64
Angular: 8.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.1
@angular-devkit/build-angular     0.800.1
@angular-devkit/build-optimizer   0.800.1
@angular-devkit/build-webpack     0.800.1
@angular-devkit/core              8.0.1
@angular-devkit/schematics        8.0.1
@angular/cli                      8.0.1
@ngtools/webpack                  8.0.1
@schematics/angular               8.0.1
@schematics/update                0.800.1
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

I’m going to upgrade our companies storybook in the next couple of days and check if it fails The only bug I encountered was https://github.com/storybookjs/storybook/issues/6934

+1
kroeder on Jun 2, 2019
Read more comments on GitHub
← storybook: Unable to host static build on sub folder
storybook: Unable to integrate with angular 6. →