-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Feature Request]: Use Angular with esbuild and vite #22544
Comments
Please include a reproduction so folks can understand what you're stuck on! |
Using esbuild as builder and a vite dev server is currently not supported for Angular. But we will evaluate possible solutions soon. |
That would be appreciated. For the monorepo I am working on, there are 5 packages and 5 Storybooks. Out of the 10 items that need to be bundled, only one uses webpack. |
I maintain Analog, which has integration for Angular using Vite's build pipeline. I have a working example of Angular with the Storybook Vite Builder. https://github.com/brandonroberts/analog-angular-storybook-vite Not sure why yet, but I have to use a different import for the Noted in this commit |
|
Any updates on this? |
@rvale01 I think the team is still working to integrate the new esbuild based Angular setup with Storybook. I pushed an updated repo with Analog and Angular v16 https://github.com/brandonroberts/analog-angular-storybook-v16 |
would love to use that when support provided |
Yep, they are working towards a solution and will show it at some point |
Any expected timeframe for this? |
any update on it? |
"We’re also working with the Angular core team to support new high-performance build options in a future version." |
Can we help? We use both, storybook8 (webpack) and angular18/esbuild/vite. |
Eventually, I made it work. Changing the property in angular.json helped. |
For anyone interrested, esbuild/vite are working with Angular 18.2.3 & Storybook 8.3.0. For serveI also had some path alias (typescript & scss) working with webpack. So I needed to add this to the .storybook/main.ts
I also had some old internal libraries in CommonJS with errors at runtime like Make sure to build libraries in ESM. For the build (& hosting), I had two more issues :Workers output format at build time
You should add to your esbuild config
ngDevMode not defined at run time (in storybook frame)
You should add to your esbuild config
|
Thanks @LeoLetourneur. There's also a guide here also for anyone looking to migrate |
@brandonroberts / @LeoLetourneur did you guys figure out how to sort out CSS post processing? e.g., tailwind. |
What issue are you having? Vite has PostCSS support built in https://vitejs.dev/guide/features.html#postcss |
Getting that same ngDevMode undefined error. Where exactly can I add that define: {...} or worker: {...} clauses? what files? |
@elirov that issue has been resolved in Analog version |
Interesting. I was getting the same error on analog 1.9.1. I had to add the following to my .storybook/main.ts:
|
Interesting. What version of Storybook/Angular/Analog plugin are you on? |
|
and here's my storybook main.ts: import { StorybookConfig } from '@storybook/angular'; const config: StorybookConfig & StorybookConfigVite = { framework: {
}, |
I did figure out how to add the ngDevMode: false option to the vite storybook config. But now, I'm getting an error in chromatic: Build and open your Storybook locally and check the browser console for errors. Error: Error: page.evaluate: TypeError: Cannot add property verbosity, object is not extensible |
Yea, We changed the detection of production mode to be based on the vite config mode, but its not being set in the config. Will get a fix in shortly on the plugin side |
@elirov landed a fix in Analog |
Is all I get after a lot of troubleshooting. The storybook compiles and the example stories work fine - until I open anything relying on Angular. |
@SeraphCoding if you're importing something from |
This compiles, but I end up with numerous issues that did not previously arise using the Webpack builder for Storybook.
whenever I hover over any menu item. There is a massive error in the browser console, when opening documentation page for any story.
However - the biggest issues are
Albeit tailwindcss 4 didn't even manage to compile when using Webpack (because of #30208 ), every other issue does not happen when using Webpack. |
@SeraphCoding create and share a GitHub repo showing the issue, and I'll take a look. |
https://github.com/SeraphCoding/AngularTW4SBVite/tree/analogjs Make sure to check out the analogjs branch. The Storybook - using analog js - does not. Sidenote - this:
from https://analogjs.org/docs/integrations/storybook, doesn't seem to make any difference. Configuring main.ts seems to be enough. |
@SeraphCoding here's the changes I made to your branch to get Tailwind working with Storybook |
Describe the bug
Why I can not use vite with Storybook Angular, Angular v16 is surport with Vite
To Reproduce
No response
System
No response
Additional context
No response
The text was updated successfully, but these errors were encountered: