+
Skip to content

@analogjs/storybook-angular install fails #1800

New issue
New issue
Closed
Closed
@analogjs/storybook-angular install fails#1800
Labels
bugSomething isn't working
@thatcort

Description

@thatcort
thatcort
opened on Jul 10, 2025

Please provide the environment you discovered this bug in.

Angular 19
NodeJS 22.14.0

Which area/package is the issue in?

storybook-angular

Description

I tried to follow the instructions to install the storybook-angular package in my Angular 19 workspace that uses the new Angular build system on a new library project. It failed with installation errors.

The steps I took:

  1. Generate a new library project: ng generate library ui
  2. Install storybook: npm create storybook@latest. This failed when trying to run because it expects webpack, so I killed the process (^C) and went to step 3.
  3. Install storybook-angular: npm install @analogjs/storybook-angular --save-dev

Here is the full log of my session:

$ ng generate library ui
CREATE projects/ui/README.md (1429 bytes)
CREATE projects/ui/ng-package.json (151 bytes)
CREATE projects/ui/package.json (206 bytes)
CREATE projects/ui/tsconfig.lib.json (475 bytes)
CREATE projects/ui/tsconfig.lib.prod.json (401 bytes)
CREATE projects/ui/tsconfig.spec.json (434 bytes)
CREATE projects/ui/src/public-api.ts (106 bytes)
CREATE projects/ui/src/lib/ui.component.spec.ts (564 bytes)
CREATE projects/ui/src/lib/ui.component.ts (192 bytes)
CREATE projects/ui/src/lib/ui.service.spec.ts (337 bytes)
CREATE projects/ui/src/lib/ui.service.ts (131 bytes)
CREATE projects/ui/eslint.config.js (624 bytes)
UPDATE angular.json (5739 bytes)
UPDATE tsconfig.json (1390 bytes)
✔ Packages installed successfully.

$ npm create storybook@latest

> web@0.0.0 npx
> create-storybook

info Installing dependencies...
info 

up to date, audited 1248 packages in 3s

199 packages are looking for funding
  run `npm fund` for details

5 vulnerabilities (1 low, 4 moderate)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
info Dependencies installed
╭───────────────────────────────────────────────────────╮
│                                                       │
│   Adding Storybook version 9.0.16 to your project..   │
│                                                       │
╰───────────────────────────────────────────────────────╯
✔ New to Storybook? › Yes: Help me with onboarding
 • Detecting project type. ✓
✔ For which project do you want to generate Storybook configuration? › ui
 • Adding Storybook support to your "ui" project╭ Compodoc ──────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                    │
│   Compodoc is a great tool to generate documentation for your Angular projects.                    │
│   Storybook can use the documentation generated by Compodoc to extract argument definitions        │
│   and JSDOC comments to display them in the Storybook UI. We highly recommend using Compodoc for   │
│   your Angular projects to get the best experience out of Storybook.                               │
│                                                                                                    │
╰────────────────────────────────────────────────────────────────────────────────────────────────────╯
✔ Do you want to use Compodoc for documentation? … no

  ✅ Getting the correct version of 4 packages

added 134 packages, removed 22 packages, changed 2 packages, and audited 1360 packages in 12s

229 packages are looking for funding
  run `npm fund` for details

5 vulnerabilities (1 low, 4 moderate)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
  ✅ Installing Storybook dependencies
info Installing dependencies...
info 

up to date, audited 1360 packages in 3s

229 packages are looking for funding
  run `npm fund` for details

5 vulnerabilities (1 low, 4 moderate)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
info Dependencies installed
╭──────────────────────────────────────────────────────────────────────────────╮
│                                                                              │
│   Storybook was successfully installed in your project! 🎉                   │
│   Additional features: docs, onboarding                                      │
│                                                                              │
│   To run Storybook manually, run ng run ui:storybook. CTRL+C to stop.        │
│                                                                              │
│   Wanna know more about Storybook? Check out https://storybook.js.org/       │
│   Having trouble or want to chat? Join us at https://discord.gg/storybook/   │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

Running Storybook
info Addon-docs: using MDX3
info => Using implicit CSS loaders
info => Using angular browser target options from "ui:build"
info => Using angular project with "tsConfig:/development/uno/web/projects/ui/.storybook/tsconfig.json"
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
ERROR in node_modules/@vitest/expect/dist/index.d.ts:29:39 - error TS2503: Cannot find namespace 'Chai'.

29  protected getMatcherContext(expect?: Chai.ExpectStatic): State;
                                         ~~~~

ERROR in node_modules/@vitest/expect/dist/index.d.ts:103:19 - error TS2503: Cannot find namespace 'Chai'.

103 type ChaiPlugin = Chai.ChaiPlugin;
                      ~~~~

ERROR in node_modules/@vitest/expect/dist/index.d.ts:165:32 - error TS2503: Cannot find namespace 'Chai'.

165 interface ExpectStatic extends Chai.ExpectStatic, Matchers, AsymmetricMatchersContaining {
                                   ~~~~

ERROR in node_modules/@vitest/expect/dist/index.d.ts:631:37 - error TS2503: Cannot find namespace 'Chai'.

631 > = { [K in keyof A] : A[K] extends Chai.Assertion ? Assertion<T> : A[K] extends (...args: any[]) => any ? A[K] : VitestAssertion<A[K], T> } & ((type: string, message?: string) => Assertion);
                                        ~~~~

ERROR in node_modules/@vitest/expect/dist/index.d.ts:634:54 - error TS2503: Cannot find namespace 'Chai'.

634 interface Assertion<T = any> extends VitestAssertion<Chai.Assertion, T>, JestAssertion<T>, Matchers<T> {
                                                         ~~~~

ERROR in node_modules/@vitest/spy/dist/index.d.ts:155:65 - error TS2304: Cannot find name 'Disposable'.

155 interface MockInstance<T extends Procedure = Procedure> extends Disposable {
                                                                    ~~~~~~~~~~

preview compiled with 6 errors
DefinePlugin
Conflicting values for 'process.env.NODE_ENV'
=> Failed to build the preview
Force closed preview build
SB_BUILDER-WEBPACK5_0003 (WebpackCompilationError): There were problems when compiling your code with Webpack.
Run Storybook with --debug-webpack for more information.
    at starter (./node_modules/@storybook/builder-webpack5/dist/index.js:1:24303)
    at starter.next (<anonymous>)
    at Module.start (./node_modules/@storybook/builder-webpack5/dist/index.js:1:26265)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async storybookDevServer (./node_modules/storybook/dist/core-server/index.cjs:36795:79)
    at async buildOrThrow (./node_modules/storybook/dist/core-server/index.cjs:35407:12)
    at async buildDevStandalone (./node_modules/storybook/dist/core-server/index.cjs:38031:78)
    at async withTelemetry (./node_modules/storybook/dist/core-server/index.cjs:36157:12)

Broken build, fix the error above.
You may need to refresh the browser.
^C

$ npm install @analogjs/storybook-angular --save-dev
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: web@0.0.0
npm error Found: @types/node@16.18.126
npm error node_modules/@types/node
npm error   dev @types/node@"^16.18.53" from the root project
npm error   @types/node@"*" from jest-environment-jsdom@29.7.0
npm error   node_modules/jest-environment-jsdom
npm error     peerOptional jest-environment-jsdom@"^29.5.0" from @angular-devkit/build-angular@19.2.15
npm error     node_modules/@angular-devkit/build-angular
npm error       dev @angular-devkit/build-angular@"^19.2.9" from the root project
npm error       2 more (@analogjs/vite-plugin-angular, @storybook/angular)
npm error
npm error Could not resolve dependency:
npm error peerOptional @types/node@"^20.19.0 || >=22.12.0" from vite@7.0.4
npm error node_modules/vite
npm error   peer vite@"^5.0.0 || ^6.0.0 || ^7.0.0" from @analogjs/storybook-angular@1.19.1
npm error   node_modules/@analogjs/storybook-angular
npm error     dev @analogjs/storybook-angular@"*" from the root project
npm error   vite@"^5.0.0 || ^6.0.0 || ^7.0.0-0" from vitest@3.2.4
npm error   node_modules/vitest
npm error     peerOptional vitest@"^3.1.1" from @angular/build@20.1.0
npm error     node_modules/@angular/build
npm error       peerOptional @angular/build@"^18.0.0 || ^19.0.0 || ^20.0.0" from @analogjs/vite-plugin-angular@1.19.1
npm error       node_modules/@analogjs/vite-plugin-angular
npm error     2 more (@vitest/browser, @vitest/ui)
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /home/brian/.npm/_logs/2025-07-10T21_23_45_687Z-eresolve-report.txt
npm error A complete log of this run can be found in: /home/brian/.npm/_logs/2025-07-10T21_23_45_687Z-debug-0.log

Please provide the exception or error you saw

error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: web@0.0.0
npm error Found: @types/node@16.18.126
npm error node_modules/@types/node
npm error   dev @types/node@"^16.18.53" from the root project
npm error   @types/node@"*" from jest-environment-jsdom@29.7.0
npm error   node_modules/jest-environment-jsdom
npm error     peerOptional jest-environment-jsdom@"^29.5.0" from @angular-devkit/build-angular@19.2.15
npm error     node_modules/@angular-devkit/build-angular
npm error       dev @angular-devkit/build-angular@"^19.2.9" from the root project
npm error       2 more (@analogjs/vite-plugin-angular, @storybook/angular)
npm error
npm error Could not resolve dependency:
npm error peerOptional @types/node@"^20.19.0 || >=22.12.0" from vite@7.0.4
npm error node_modules/vite
npm error   peer vite@"^5.0.0 || ^6.0.0 || ^7.0.0" from @analogjs/storybook-angular@1.19.1
npm error   node_modules/@analogjs/storybook-angular
npm error     dev @analogjs/storybook-angular@"*" from the root project
npm error   vite@"^5.0.0 || ^6.0.0 || ^7.0.0-0" from vitest@3.2.4
npm error   node_modules/vitest
npm error     peerOptional vitest@"^3.1.1" from @angular/build@20.1.0
npm error     node_modules/@angular/build
npm error       peerOptional @angular/build@"^18.0.0 || ^19.0.0 || ^20.0.0" from @analogjs/vite-plugin-angular@1.19.1
npm error       node_modules/@analogjs/vite-plugin-angular
npm error     2 more (@vitest/browser, @vitest/ui)
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /home/brian/.npm/_logs/2025-07-10T21_23_45_687Z-eresolve-report.txt
npm error A complete log of this run can be found in: /home/brian/.npm/_logs/2025-07-10T21_23_45_687Z-debug-0.log

Other information

No response

I would be willing to submit a PR to fix this issue

  • Yes
  • No

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions
      点击 这是indexloc提供的php浏览器服务，不要输入任何密码和下载