Skip to content
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

Open
yangfan100 opened this issue May 13, 2023 · 33 comments
Open

[Feature Request]: Use Angular with esbuild and vite #22544

yangfan100 opened this issue May 13, 2023 · 33 comments

Comments

@yangfan100
Copy link

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

@usrrname
Copy link
Contributor

Please include a reproduction so folks can understand what you're stuck on!

@valentinpalkovic valentinpalkovic changed the title [Bug]: Why I can not use vite with Storybook Angular, Angular v16 is surport with Vite,thank U! [Feature Request]: Use Angular v16 with esbuild and vite May 15, 2023
@valentinpalkovic
Copy link
Contributor

valentinpalkovic commented May 15, 2023

Using esbuild as builder and a vite dev server is currently not supported for Angular. But we will evaluate possible solutions soon.

@nstuyvesant
Copy link

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.

@brandonroberts
Copy link

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 @storybook/angular imports. If anyone has any insight there, that would help.

Noted in this commit

brandonroberts/analog-angular-storybook-vite@194c380

@asifaminb
Copy link

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 @storybook/angular imports. If anyone has any insight there, that would help.

Noted in this commit

brandonroberts/analog-angular-storybook-vite@194c380

I got an error when I tried to run this project locally,
image

@rvale01
Copy link

rvale01 commented Sep 12, 2023

Any updates on this?

@brandonroberts
Copy link

@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

@pumano
Copy link

pumano commented Dec 15, 2023

would love to use that when support provided

@brandonroberts
Copy link

would love to use that when support provided

Yep, they are working towards a solution and will show it at some point

@byjokese
Copy link

Any expected timeframe for this?

@VaniaBlanar
Copy link

any update on it?

@bastiW
Copy link

bastiW commented Apr 1, 2024

"We’re also working with the Angular core team to support new high-performance build options in a future version."

https://storybook.js.org/blog/storybook-8/

@valentinpalkovic valentinpalkovic changed the title [Feature Request]: Use Angular v16 with esbuild and vite [Feature Request]: Use Angular with esbuild and vite Apr 21, 2024
@sod
Copy link

sod commented Jun 7, 2024

Can we help? We use both, storybook8 (webpack) and angular18/esbuild/vite.

@VaniaBlanar
Copy link

Eventually, I made it work. Changing the property in angular.json helped.
from "outputPath": { "base": "./dist"} to "outputPath": "./dist",

@LeoLetourneur
Copy link

LeoLetourneur commented Sep 12, 2024

For anyone interrested, esbuild/vite are working with Angular 18.2.3 & Storybook 8.3.0.
I made it work thanks to this repo https://github.com/brandonroberts/angular-v17-vite-storybook

For serve

I also had some path alias (typescript & scss) working with webpack. So I needed to add this to the .storybook/main.ts

resolve: {
    alias: {
          '@env': path.resolve(__dirname, '../src/environments/environment'),
          '@features': path.resolve(__dirname, '../src/app/features/'),
          '@shared': path.resolve(__dirname, '../src/app/shared'),
          '@core': path.resolve(__dirname, '../src/app/core'),
          shared: path.resolve(__dirname, '../src/styles/shared.scss'), // <- scss alias @import 'shared'
    },
},

I also had some old internal libraries in CommonJS with errors at runtime like
Module xxx doesn't not provide exported name { XXX } for file://xxx/xxx/xxx

Make sure to build libraries in ESM.

For the build (& hosting), I had two more issues :

Workers output format at build time
I have web workers in my app. Build failed like :

[vite:worker-import-meta-url] Invalid value "iife" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.

You should add to your esbuild config

worker: {
    format: 'esm',
},

ngDevMode not defined at run time (in storybook frame)

ReferenceError: ngDevMode is not defined

You should add to your esbuild config

define: {
    ngDevMode: 'undefined',
},

@brandonroberts
Copy link

Thanks @LeoLetourneur. There's also a guide here also for anyone looking to migrate

https://analogjs.org/docs/integrations/storybook

@sinaa
Copy link

sinaa commented Sep 27, 2024

@brandonroberts / @LeoLetourneur did you guys figure out how to sort out CSS post processing? e.g., tailwind.

@brandonroberts
Copy link

@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

@elirov
Copy link

elirov commented Nov 3, 2024

For anyone interrested, esbuild/vite are working with Angular 18.2.3 & Storybook 8.3.0. I made it work thanks to this repo https://github.com/brandonroberts/angular-v17-vite-storybook

For serve

I also had some path alias (typescript & scss) working with webpack. So I needed to add this to the .storybook/main.ts

resolve: {
    alias: {
          '@env': path.resolve(__dirname, '../src/environments/environment'),
          '@features': path.resolve(__dirname, '../src/app/features/'),
          '@shared': path.resolve(__dirname, '../src/app/shared'),
          '@core': path.resolve(__dirname, '../src/app/core'),
          shared: path.resolve(__dirname, '../src/styles/shared.scss'), // <- scss alias @import 'shared'
    },
},

I also had some old internal libraries in CommonJS with errors at runtime like Module xxx doesn't not provide exported name { XXX } for file://xxx/xxx/xxx

Make sure to build libraries in ESM.

For the build (& hosting), I had two more issues :

Workers output format at build time I have web workers in my app. Build failed like :

[vite:worker-import-meta-url] Invalid value "iife" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.

You should add to your esbuild config

worker: {
    format: 'esm',
},

ngDevMode not defined at run time (in storybook frame)

ReferenceError: ngDevMode is not defined

You should add to your esbuild config

define: {
    ngDevMode: 'undefined',
},

Getting that same ngDevMode undefined error. Where exactly can I add that define: {...} or worker: {...} clauses? what files?

@brandonroberts
Copy link

@elirov that issue has been resolved in Analog version 1.9.1.

@elirov
Copy link

elirov commented Nov 4, 2024

Interesting. I was getting the same error on analog 1.9.1. I had to add the following to my .storybook/main.ts:
async viteFinal(config: UserConfig) {
// Merge custom configuration into the default config
const { mergeConfig } = await import('vite');
const { default: angular } = await import('@analogjs/vite-plugin-angular');
const tailwindcss = await import('tailwindcss');
const autoprefixer = await import('autoprefixer');

return mergeConfig(config, {
  define: {
    ngDevMode: 'false',
  },

@brandonroberts
Copy link

Interesting. What version of Storybook/Angular/Analog plugin are you on?

@elirov
Copy link

elirov commented Nov 4, 2024

"@analogjs/vite-plugin-angular": "^1.9.1",
"@chromatic-com/storybook": "3.2.2",
"@storybook/addon-designs": "8.0.4",
"@storybook/addon-docs": "8.4.1",
"@storybook/addon-essentials": "8.4.1",
"@storybook/addon-interactions": "8.4.1",
"@storybook/addon-links": "8.4.1",
"@storybook/angular": "8.4.1",
"@storybook/blocks": "8.4.1",
"@storybook/builder-vite": "^8.4.1",
"@storybook/test": "8.4.1",
"eslint-plugin-storybook": "0.10.2",
"storybook": "^8.4.1",
"storybook-addon-angular-router": "1.10.1",
"storybook-addon-mock": "5.0.0",
"storybook-addon-mock-date": "^0.6.0",
"vite": "^5.4.10",
"vite-tsconfig-paths": "^5.0.1",

@elirov
Copy link

elirov commented Nov 4, 2024

and here's my storybook main.ts: import { StorybookConfig } from '@storybook/angular';
import { StorybookConfigVite } from '@storybook/builder-vite';
import { resolve } from 'path';
import { UserConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

const config: StorybookConfig & StorybookConfigVite = {
// other config, addons, etc.
stories: ['../src/**/*.stories.ts'],
//staticDirs: ['../storybook-static'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'storybook-addon-mock',
'storybook-addon-mock-date',
],

framework: {
name: '@storybook/angular',
options: {},
},
core: {
builder: '@storybook/builder-vite',
},
async viteFinal(config: UserConfig) {
// Merge custom configuration into the default config
const { mergeConfig } = await import('vite');
const { default: angular } = await import('@analogjs/vite-plugin-angular');
const tailwindcss = await import('tailwindcss');
const autoprefixer = await import('autoprefixer');

return mergeConfig(config, {
  define: {
    ngDevMode: 'false',
  },
  // Add dependencies to pre-optimization
  resolve: {
    alias: {
      app: resolve(__dirname, '../src/app'),
      features: resolve(__dirname, '../src/features'),
      shared: resolve(__dirname, '../src/shared'),
      theme: resolve(__dirname, '../src/theme'),
      environments: resolve(__dirname, '../src/environments'),
      licenses: resolve(__dirname, '../src/licenses'),
      '@syncfusion': resolve(__dirname, '../node_modules/@syncfusion'),
    },
  },
  optimizeDeps: {
    include: [
      '@storybook/angular',
      '@storybook/angular/dist/client',
      '@angular/compiler',
      '@storybook/blocks',
      'tslib',
    ],
    exclude: ['@analogjs/vite-plugin-angular'],
  },
  plugins: [
    tsconfigPaths(),
    angular({ jit: true, tsconfig: './.storybook/tsconfig.json' }),
  ],
  css: {
    postcss: {
      plugins: [tailwindcss.default(), autoprefixer.default()],
    },
    preprocessorOptions: {
      scss: {
        includePaths: [
          resolve(__dirname, '../src'),
          resolve(__dirname, '../node_modules'),
          resolve(__dirname, '../node_modules/@syncfusion'),
          resolve(__dirname, '../node_modules/@syncfusion/ej2-base/styles'),
          resolve(
            __dirname,
            '../node_modules/@syncfusion/ej2-icons/styles'
          ),
        ],
      },
    },
  },
});

},
};
export default config;

@elirov
Copy link

elirov commented Nov 4, 2024

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:
✖ Failed to extract stories from your Storybook
This is usually a problem with your published Storybook, not with Chromatic.

Build and open your Storybook locally and check the browser console for errors.
Visit your published Storybook at
The following error was encountered while running your Storybook:

Error: Error: page.evaluate: TypeError: Cannot add property verbosity, object is not extensible

@brandonroberts
Copy link

brandonroberts commented Nov 4, 2024

Yea, ngDevMode should be false when doing a build. I'm seeing the issue here also https://github.com/brandonroberts/angular-v17-vite-storybook with the latest version of the plugin.

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

@brandonroberts
Copy link

@elirov landed a fix in Analog 1.9.2-beta.2 you can test

@SeraphCoding
Copy link

SeraphCoding commented Jan 7, 2025

@brandonroberts

landed a fix in Analog 1.9.2-beta.2 you can test

The requested module '/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/@storybook_angular.js?v=0f388471' does not provide an export named 'applicationConfig'

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.

@brandonroberts
Copy link

@SeraphCoding if you're importing something from @storybook/angular that's not a type, try using @storybook/angular/dist/client instead. For some reason, direct imports work incorrectly in an ESM-only setup. We have some checks for this in the angular vite plugin, but it may not catch everything

@SeraphCoding
Copy link

SeraphCoding commented Jan 7, 2025

@brandonroberts

@SeraphCoding if you're importing something from @storybook/angular that's not a type, try using @storybook/angular/dist/client instead. For some reason, direct imports work incorrectly in an ESM-only setup. We have some checks for this in the angular vite plugin, but it may not catch everything

This compiles, but I end up with numerous issues that did not previously arise using the Webpack builder for Storybook.
Namely, my console is spammed with

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

More info: https://sass-lang.com/d/legacy-js-api

whenever I hover over any menu item.

There is a massive error in the browser console, when opening documentation page for any story.

chunk-LNLQDV5X.js?v=925b8701:521 Warning: validateDOMNesting(...): <pre> cannot appear as a descendant of <p>.
    at pre
    at http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-BSMZKW2J.js?v=925b8701:1315:41
    at SyntaxHighlighter (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-3VGQZPW7.js?v=925b8701:916:15)
    at div
    at div
    at http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-3VGQZPW7.js?v=925b8701:4356:18
    at http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-3VGQZPW7.js?v=925b8701:4722:26
    at http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-BSMZKW2J.js?v=925b8701:1315:41
    at div
    at http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-3VGQZPW7.js?v=925b8701:4356:18
    at Provider (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-3VGQZPW7.js?v=925b8701:4471:16)
    at http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-3VGQZPW7.js?v=925b8701:4679:26
    at http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-BSMZKW2J.js?v=925b8701:1315:41
    at http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-3VGQZPW7.js?v=925b8701:5282:15
    at UnstyledScroller (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-3VGQZPW7.js?v=925b8701:5402:15)
    at http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-BSMZKW2J.js?v=925b8701:1315:41
    at div
    at http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-BSMZKW2J.js?v=925b8701:1315:41
    at SyntaxHighlighter (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-3VGQZPW7.js?v=925b8701:5465:15)
    at default
    at Suspense
    at SyntaxHighlighter (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-3VGQZPW7.js?v=925b8701:23827:6)
    at http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-BSMZKW2J.js?v=925b8701:1315:41
    at Source (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-UDBVHBLW.js?v=925b8701:2362:3)
    at CodeOrSourceMdx (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-UDBVHBLW.js?v=925b8701:8875:3)
    at p
    at div
    at index_modern_default (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-UDBVHBLW.js?v=925b8701:3937:15)
    at Markdown (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-UDBVHBLW.js?v=925b8701:8996:14)
    at DescriptionContainer (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-UDBVHBLW.js?v=925b8701:9062:5)
    at DocsPage (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-UDBVHBLW.js?v=925b8701:9374:20)
    at div
    at http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-BSMZKW2J.js?v=925b8701:1315:41
    at div
    at http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-BSMZKW2J.js?v=925b8701:1315:41
    at DocsPageWrapper (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-UDBVHBLW.js?v=925b8701:2783:3)
    at ThemeProvider (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-BSMZKW2J.js?v=925b8701:1349:13)
    at SourceContainer (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-UDBVHBLW.js?v=925b8701:8572:3)
    at DocsContainer (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-UDBVHBLW.js?v=925b8701:9183:3)
    at Docs (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-UDBVHBLW.js?v=925b8701:9384:3)
    at MDXProvider (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-I3WTTUWZ.js?v=925b8701:25:18)
    at ErrorBoundary (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-PKG4WHJN.js?v=925b8701:77:5)
    at WithCallback (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-PKG4WHJN.js?v=925b8701:28:3)

However - the biggest issues are

  • tailwindcss (version 4) styles are not loaded
  • None of the fonts/icon sets are loaded (using fontsource)
  • All Angular Material (19) CSS Variables are undefined Image

Albeit tailwindcss 4 didn't even manage to compile when using Webpack (because of #30208 ), every other issue does not happen when using Webpack.

@brandonroberts
Copy link

@SeraphCoding create and share a GitHub repo showing the issue, and I'll take a look.

@SeraphCoding
Copy link

@brandonroberts

https://github.com/SeraphCoding/AngularTW4SBVite/tree/analogjs

Make sure to check out the analogjs branch.
Check the "text" story.
ng serve will have all the beautiful styles and Material Variables, it will even run tailwindcss version 4.

The Storybook - using analog js - does not.

Sidenote - this:

Next, Update the package.json to run the Storybook commands directly.

{
  "name": "my-app",
  "scripts": {
    "storybook": "storybook dev --port 4400",
    "build-storybook": "storybook build"
  }
}

from https://analogjs.org/docs/integrations/storybook, doesn't seem to make any difference. Configuring main.ts seems to be enough.

@brandonroberts
Copy link

@SeraphCoding here's the changes I made to your branch to get Tailwind working with Storybook

brandonroberts/AngularTW4SBVite@89e3a22

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.