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

[martinsik]

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 [email protected]: 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/[email protected] 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

[lslocum]

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

[Jason-Michaels]

The zone.js dependency error is also stopping me from using storybook in Angular 8... I hope it get's resolved soon!

[kroeder]

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

[brianmcd]

@kroeder - When I run those commands, I get a warning about @angular/storybook zone.js dependency:

warning " > @storybook/[email protected]" has incorrect peer dependency "zone.js@^0.8.27".

Things proceed and install, but a fresh install is different than upgrading with the Angular CLI.

This fails:

yarn global add @angular/cli@^7 @storybook/cli
ng new ng8-upgrade-sb
sb init
ng update @angular/cli @angular/core

Output:

Package "@storybook/angular" has an incompatible peer dependency to "zone.js" (requires "^0.8.27", would install "0.9.1").
Incompatible peer dependencies found. See above.

And the CLI won't proceed.

I'd imagine that the zone.js peerDependency just needs to be bumped: https://github.com/storybookjs/storybook/blob/8fef8f408f52105f4c48a13d61ab2df2e068080e/app/angular/package.json#L54

A workaround is:

ng update @angular/cli @angular/core --force

[martinsik]

I just tried again what I wrote in the initial post after upgrading to Angular 8 but I'm still having the exact same issue:

C:\Users\user\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\test-storybook\node_modules\array.prototype.flat' -> 'C:\Users\user\test-storybook\node_modules\.array.prototype.flat.DELETE'
npm ERR! enoent This is related to npm not being able to find a file.

[brianmcd]

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

[kroeder]

A short wrap-up: There seem to be 2 individual bugs here

1. sb init in an Angular 7 project and then yarn storybook won't work. Angular 7 depends on core-js@^2.0.0, Angular 7 on core-js@^3.0.0 due to babel. There's a webpack plugin that was meant to solve that version mismatch but it seems that there's still an issue. If you got stuck with something like Module not found: Error: Can't resolve 'core-js/modules/es.array.for-each' then I suggest to first update to Angular 8 if possible. They dropped their dependency on core-js. We are working on a fix

2. If you run into a zone.js issue then it is caused by a missing version range for zone.js in @storybook/angular. It should be easy to fix - see #6951. @brianmcd thanks for opening a new issue for that. As workaround I suggest to try ng update @angular/core --force. Please comment in the other issue if this is the error you are running into

@arjunkalburgi Your issue in your first snippet was solved by https://github.com/storybookjs/storybook/issues/6934. If you still run into your second error after using the latest storybook RC then please open a separate issue. It doesn't seem like this is related to this issue. Correct me if I'm wrong 🙂

[arjunkalburgi]

I fixed it by upgrading to Ionic 4 and Angular 7. Which now makes sense why that worked because it upgraded those other dependencies too. Nice!

[shilman]

Is this still an issue @kroeder ?

[lslocum]

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

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[asinitson]

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:

If you substitute first two envrionment variables to:

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

...then you get to the happy end:

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?

[kroeder]

I'll take a look at this later this day
Seems like a dependency injection issue

can't resolve all parameters for AppComponent(?, ?) usually means the DI Tokens couldn't be injected into AppComponent

https://github.com/storybookjs/storybook/blob/next/app/angular/src/client/preview/angular/components/app.component.ts#L38

  constructor(
    private cfr: ComponentFactoryResolver,
    private changeDetectorRef: ChangeDetectorRef,
    @Inject(STORY) private data: Observable<StoryFnAngularReturnType>
  ) {}

the first two can't be resolved, but the Story Token seems to work 🤔

[kroeder]

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

[bzkny]

This workaround didn't work for me added: "skibLibCheck": true, to .storybook/tsconfig.json + npm run storybook but same message

[MrBugatti]

Can confirm the above error.

This seems to be fixed in @next

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

This command is all I needed to get working for Angular 8.2.0

[shilman]

@kroeder can we close this?

[nategreen]

@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.

[asinitson]

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):

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.

[vasyl-trs]

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

[guillermoarellano]

@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

[asinitson]

@guillermoarellano : Thanks! That did the trick!

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

npm install @angular/[email protected]
npm install @angular-devkit/[email protected]

...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:

[kroeder]

This was fixed in 5.2.4 and should already work as intended. I tested it with angular 8.2.14 and storybook 5.2 and 5.3-beta.2

I close this since everything seems to work now.
Please leave a comment if it is not fixed for your project!