[Tracking]: @storybook/angular-vite Framework

Create @storybook/angular-vite Framework

Overview

Implement a new @storybook/angular-vite framework package for Storybook that uses Vite instead of Webpack, providing a modern alternative to the existing webpack-based @storybook/angular package. This will enable the adoption of Storybook with Angular projects using Vite/Analog while eliminating the need for webpack dependencies.

Motivation

• The existing @storybook/angular package is heavily dependent on Webpack and Angular builders, which adds significant overhead. The new framework should provide a clean break from webpack-specific logic
• There is demand from the Angular community for an official Vite-based solution
• The exposed Angular Webpack API is in maintenance mode and is considered to be legacy. The Angular Core team may drop it at any time in future major Angular versions.

Goals

1. Create an officially maintained @storybook/angular-vite package
2. Eliminate webpack dependencies from the new framework
3. Integrate seamlessly into Storybook's CLI ecosystem
4. Establish comprehensive testing and CI/CD support
5. Provide clear migration path and documentation for Angular developers

Scope: Implementation Tasks

Phase 1: Framework Package Creation

• Create new @storybook/angular-vite package in code/frameworks/
• Copy and refactor renderer logic from @storybook/angular (clean break approach)
  • Remove all webpack-specific dependencies
  • Update build configuration for Vite
  • OPTIONAL: Ensure TestBed API integration (from #31311)

Phase 2: CLI Integration

• Add @storybook/angular-vite as scaffold option in Storybook CLI (mark it as in-preview)
• Update CLI prompts to offer both webpack and Vite variants
• Create installation templates for the CLI
• Set default framework option for new Angular projects using Vite

Phase 3: Testing & CI/CD

• Create angular-vite/default-ts sandbox template in storybook-sandboxes
• Ensure E2E tests are enabled for the new framework
• Integrate Chromatic testing against the sandbox
• Include in CI pipeline for continuous validation

Phase 4: Documentation

• Document framework differences between webpack and Vite variants
• Create migration guide from @storybook/angular to @storybook/angular-vite
• Update Framework support matrix
• Document setup and configuration specific to the Vite approach
• Note behavioral differences (Angular builders vs. Storybook CLI dev/build)
• Fix up the frameworks page (add angular vite, keep analog until SB11 but add deprecation notice in the code so we can find it)

Phase 5: Maintenance Strategy - after @storybook/angular-vite has established itself as a default

• Classify @storybook/angular as legacy (no new features, critical bug fixes only)
• Add deprecation notice to @storybook/angular documentation
• Establish support timeline for webpack variant
• Clarify relationship with @analogjs/storybook-angular (point users to official package)

Followup dumping ground

Tasks on this list were listed as follow-ups on previous phases. Some may be QA and code smells, some may overlap with existing tracked issues, some may be actual bugs.

• disableTelemetry might be missing from code/frameworks/angular-vite/*-schema.json
• Do a cursory check on docs/writing-tests/integrations/vitest-addon/index.mdx and docs/writing-tests/integrations/vitest-addon/migration-guide.mdx
• Consider whether to add a @storybook/angular-vite:test-storybook builder in the future

Technical Details

Architecture Decisions

• Copy/Paste Approach: Renderer logic will be copied rather than extracted to a shared package, ensuring clean separation and independence from webpack-based code
• [OPTIONAL] TestBed API: Leverage the component creation improvements from #31311 as foundation
• Vite Configuration: Build upon Analog's proven Vite plugin architecture

Related Issues & PRs

• #31311 - Angular: Component creation with TestBed API
• #31088 - Angular framework modernization
• @analogjs/storybook-angular - Reference implementation for Vite approach

Success Criteria

• ✅ @storybook/angular-vite package is available in npm
• ✅ Storybook CLI offers the new framework as an option
• ✅ Angular-Vite sandbox is created and tested in CI
• ✅ All E2E and Chromatic tests pass
• ✅ Documentation clearly explains differences and migration paths
• ✅ Users report successful adoption without webpack-related issues
• ✅ No webpack dependencies required by @storybook/angular-vite

Ownership & Discussion

• Collaborators: @brandonroberts, @valentinpalkovic

Timeline

To be determined based on available resources and priorities.

Notes

• The webpack-based @storybook/angular will continue to exist for backward compatibility, but will not receive new features
• This is a major step forward for Angular developer experience in Storybook's ecosystem