feat(angular): add Vite as a bundler option to @storybook/angular package

code/frameworks/angular/package.json

@@ -52,6 +52,7 @@
     "prep": "rimraf dist && jiti ../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
+    "@storybook/builder-vite": "workspace:*",
     "@storybook/builder-webpack5": "workspace:*",
     "@storybook/core-webpack": "workspace:*",
     "@storybook/global": "^5.0.0",
@@ -69,7 +70,7 @@
     "webpack": "5"
   },
   "devDependencies": {
-    "@analogjs/vite-plugin-angular": "^1.12.1",
+    "@analogjs/vite-plugin-angular": "^1.15.0",
     "@angular-devkit/architect": "^0.1901.1",
     "@angular-devkit/build-angular": "^19.1.1",
     "@angular-devkit/core": "^19.1.1",
@@ -89,10 +90,12 @@
     "rimraf": "^6.0.1",
     "tmp": "^0.2.1",
     "typescript": "^5.7.3",
+    "vite": "^6.0.0",
     "webpack": "5",
     "zone.js": "^0.15.0"
   },
   "peerDependencies": {
+    "@analogjs/vite-plugin-angular": ">=1.15.0 < 2.0.0",
     "@angular-devkit/architect": ">=0.1800.0 < 0.2000.0",
     "@angular-devkit/build-angular": ">=18.0.0 < 20.0.0",
     "@angular-devkit/core": ">=18.0.0 < 20.0.0",
@@ -108,6 +111,7 @@
     "rxjs": "^6.5.3 || ^7.4.0",
     "storybook": "workspace:^",
     "typescript": "^4.9.0 || ^5.0.0",
+    "vite": "*",
     "zone.js": ">=0.14.0"
   },
   "peerDependenciesMeta": {

code/frameworks/angular/src/builders/build-storybook/index.spec.ts

@@ -241,4 +241,33 @@ describe.skip('Build Storybook Builder', () => {
       })
     );
   });
+
+  it('should start storybook with Vite bundler', async () => {
+    const run = await architect.scheduleBuilder('@storybook/angular:build-storybook', {
+      compodoc: false,
+      bundler: 'vite',
+    });
+
+    const output = await run.result;
+
+    await run.stop();
+
+    expect(output.success).toBeTruthy();
+    expect(mockRunScript).not.toHaveBeenCalledWith();
+    expect(buildStaticStandaloneMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        angularBuilderContext: expect.any(Object),
+        configDir: '.storybook',
+        loglevel: undefined,
+        quiet: false,
+        disableTelemetry: undefined,
+        outputDir: 'storybook-static',
+        packageJson: expect.any(Object),
+        mode: 'static',
+        tsConfig: './storybook/tsconfig.ts',
+        statsJson: false,
+        bundler: 'vite',
+      })
+    );
+  });
 });

code/frameworks/angular/src/builders/build-storybook/index.ts

@@ -106,6 +106,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (
         sourceMap = false,
         preserveSymlinks = false,
         experimentalZoneless = false,
+        bundler,
       } = options;
 
       const standaloneOptions: StandaloneBuildOptions = {
@@ -133,6 +134,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (
         statsJson,
         debugWebpack,
         previewUrl,
+        bundler,
       };
 
       return standaloneOptions;

code/frameworks/angular/src/builders/build-storybook/schema.json

@@ -126,6 +126,11 @@
       "type": "boolean",
       "description": "Experimental: Use zoneless change detection.",
       "default": false
+    },
+    "bundler": {
+      "type": "string",
+      "default": "webpack",
+      "enum": ["webpack", "vite"]
     }
   },
   "additionalProperties": false,

code/frameworks/angular/src/builders/start-storybook/index.spec.ts

@@ -230,4 +230,38 @@ describe.skip('Start Storybook Builder', () => {
       tsConfig: 'path/to/tsConfig.json',
     });
   });
+
+  it('should start storybook with Vite bundler', async () => {
+    const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
+      port: 4400,
+      compodoc: false,
+      bundler: 'vite',
+    });
+
+    const output = await run.result;
+
+    await run.stop();
+
+    expect(output.success).toBeTruthy();
+    expect(mockRunScript).not.toHaveBeenCalledWith();
+    expect(buildDevStandaloneMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        angularBuilderContext: expect.any(Object),
+        ci: false,
+        configDir: '.storybook',
+        disableTelemetry: undefined,
+        host: 'localhost',
+        https: false,
+        packageJson: expect.any(Object),
+        port: 4400,
+        quiet: false,
+        smokeTest: false,
+        sslCa: undefined,
+        sslCert: undefined,
+        sslKey: undefined,
+        tsConfig: './storybook/tsconfig.ts',
+        bundler: 'vite',
+      })
+    );
+  });
 });

code/frameworks/angular/src/builders/start-storybook/index.ts

@@ -123,6 +123,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (options, cont
         sourceMap = false,
         preserveSymlinks = false,
         experimentalZoneless = false,
+        bundler,
       } = options;
 
       const standaloneOptions: StandaloneOptions = {
@@ -158,6 +159,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (options, cont
         statsJson,
         loglevel,
         previewUrl,
+        bundler,
       };
 
       return standaloneOptions;

code/frameworks/angular/src/builders/start-storybook/schema.json

@@ -162,6 +162,11 @@
       "type": "boolean",
       "description": "Experimental: Use zoneless change detection.",
       "default": false
+    },
+    "bundler": {
+      "type": "string",
+      "default": "webpack",
+      "enum": ["webpack", "vite"]
     }
   },
   "additionalProperties": false,

code/frameworks/angular/src/builders/utils/standalone-options.ts

@@ -22,6 +22,7 @@ export type StandaloneOptions = CLIOptions &
       preserveSymlinks?: boolean;
       experimentalZoneless?: boolean;
     };
+    bundler?: string | null;
     angularBuilderContext?: BuilderContext | null;
     tsConfig?: string;
   };

code/frameworks/angular/src/preset.ts

@@ -25,11 +25,14 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entries
 
 export const core: PresetProperty<'core'> = async (config, options) => {
   const framework = await options.presets.apply('framework');
-
+  const builder =
+    (options as StandaloneOptions).bundler === 'vite'
+      ? '@storybook/builder-vite'
+      : '@storybook/builder-webpack5';
   return {
     ...config,
     builder: {
-      name: getAbsolutePath('@storybook/builder-webpack5'),
+      name: getAbsolutePath(builder),
       options: typeof framework === 'string' ? {} : framework.options.builder || {},
     },
   };
@@ -41,3 +44,40 @@ export const typescript: PresetProperty<'typescript'> = async (config) => {
     skipCompiler: true,
   };
 };
+
+export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (
+  config,
+  options: Options & StandaloneOptions
+) => {
+  // Merge custom configuration into the default config
+  const { mergeConfig } = await import('vite');
+  const { default: angular } = await import('@analogjs/vite-plugin-angular');
+
+  return mergeConfig(config, {
+    // Add dependencies to pre-optimization
+    optimizeDeps: {
+      include: [
+        '@storybook/angular/dist/client/index.js',
+        '@angular/compiler',
+        '@angular/platform-browser/animations',
+        '@storybook/addon-docs/angular',
+        'react/jsx-dev-runtime',
+        '@storybook/blocks',
+        'tslib',
+        'zone.js',
+      ],
+    },
+    plugins: [
+      angular({
+        jit: true,
+        liveReload: false,
+        tsconfig: options?.tsConfig ?? './.storybook/tsconfig.json',
+      }),
+    ],
+    define: {
+      STORYBOOK_ANGULAR_OPTIONS: JSON.stringify({
+        experimentalZoneless: !!options?.angularBuilderOptions?.experimentalZoneless,
+      }),
+    },
+  });
+};