Angular 18 + vite + storybook not working

[pumano]

Please provide the environment you discovered this bug in.

use https://github.com/brandonroberts/angular-v17-vite-storybook and update angular to 18.x latest

Which area/package is the issue in?

vite-plugin-angular

Description

I simply use angular 18 with https://analogjs.org/docs/integrations/storybook but it's not working

Please provide the exception or error you saw

info => Building manager..
info => Manager built (400 ms)
info => Building preview..
info => Copying static files: libs/ui-kit/assets at dist/storybook/ui-kit
=> Failed to build the preview
Error: Cannot find module '@angular/build/private'
Require stack:
- ./node_modules/@analogjs/vite-plugin-angular/src/lib/utils/devkit.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1225:15)
    at Module._load (node:internal/modules/cjs/loader:1051:27)
    at Module.require (node:internal/modules/cjs/loader:1311:19)
    at Module.require (./node_modules/nx/src/adapter/compat.js:70:40)
    at require (node:internal/modules/helpers:179:18)
    at <anonymous> (./packages/vite-plugin-angular/src/lib/utils/devkit.ts:52:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)
    at async Object.viteFinal (./libs/ui-kit/.storybook/main.ts:33:34)
    at async build (./node_modules/@storybook/builder-vite/dist/index.js:55:10644)

Other information

when manually try to force 18 angular in @analogjs/vite-plugin-angular/src/lib/devkit.js

(that code removed in 18 angular)

info => Building manager..
info => Manager built (129 ms)
info => Building preview..
info => Copying static files: libs/ui-kit/assets at dist/storybook/ui-kit
=> Failed to build the preview
Error: Cannot find module '@angular-devkit/build-angular/src/tools/esbuild/angular/compiler-plugin.js'
Require stack:
- ./node_modules/@analogjs/vite-plugin-angular/src/lib/utils/devkit.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1225:15)
    at Module._load (node:internal/modules/cjs/loader:1051:27)
    at Module.require (node:internal/modules/cjs/loader:1311:19)
    at Module.require (./node_modules/nx/src/adapter/compat.js:70:40)
    at require (node:internal/modules/helpers:179:18)
    at <anonymous> (./packages/vite-plugin-angular/src/lib/utils/devkit.ts:28:14)
    at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)
    at async Object.viteFinal (./libs/ui-kit/.storybook/main.ts:33:34)

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

• [ ] Yes
• [ ] No

[brandonroberts]

It does work with Angular v18. If you're using yarn, it does not install peer dependencies. So you need to explicitly add them to your package.json.

yarn add @angular-devkit/build-angular --dev

Example repo https://github.com/brandonroberts/angular-nx-storybook-vite

[pumano]

I have that direct dependency angular-devkit/build-angular when I submit issue. But that error exists

[DLoT]

I had the same issue running unit tests via vitest.

Installing @angular/build as directy dev dependency solved the issue for me.

npm i -D @angular/build