Angular: Install @analogjs/vite-plugin-angular in angular-to-angular-vite automigration

[valentinpalkovic]

Closes #

What I did

@analogjs/vite-plugin-angular is a required (non-optional) peer dependency of @storybook/angular-vite and is hard-imported by the framework preset at startup. The angular-to-angular-vite automigration swapped @storybook/angular for @storybook/angular-vite but never installed this peer. npm 7+ auto-installs missing peers, so the gap was invisible there, but Yarn and pnpm do not - users on those package managers ended up with a broken Storybook right after migrating.

The automigration now adds @analogjs/vite-plugin-angular as a devDependency alongside @storybook/angular-vite, mirroring the init generator. When the project already declares it, the existing version is left untouched.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. Create an Angular 21 project with the webpack-based Storybook setup (@storybook/angular), using yarn or pnpm (the bug does not reproduce on npm because npm auto-installs peers)
2. Run npx storybook@0.0.0-pr-35432-sha-<sha> automigrate angular-to-angular-vite
3. Verify @analogjs/vite-plugin-angular was added to the project's devDependencies
4. Run yarn storybook / pnpm storybook and verify the dev server starts (before this fix it fails with a module-not-found error for @analogjs/vite-plugin-angular)

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Declare whether manual QA will be needed for this PR during the next release, through qa:needed or qa:skip

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This pull request has been released as version 0.0.0-pr-35432-sha-8487b1ab. Try it out in a new sandbox by running npx storybook@0.0.0-pr-35432-sha-8487b1ab sandbox or in an existing project with npx storybook@0.0.0-pr-35432-sha-8487b1ab upgrade.

More information

Published version	0.0.0-pr-35432-sha-8487b1ab
Triggered by	@valentinpalkovic
Repository	storybookjs/storybook
Branch	valentin/angular-vite-automigration-analogjs-peer-dep
Commit	8487b1ab
Datetime	Fri Jul 10 07:48:54 UTC 2026 (1783669734)
Workflow run	29077781193

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=35432

Summary by CodeRabbit

• Bug Fixes
  • Angular projects migrated to the Vite-based Storybook builder now automatically receive the required Angular Vite plugin.
  • Existing installations of the plugin are recognized and are not added again.

[coderabbitai]

📝 Walkthrough

Walkthrough

The Angular-to-Angular-Vite migration now adds @analogjs/vite-plugin-angular when absent and updates tests to verify dependency defaults, installation arguments, and duplicate prevention.

Changes

Angular Vite dependency migration

Layer / File(s)	Summary
Conditionally add the Angular Vite plugin code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.ts, code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.test.ts	The migration conditionally adds @analogjs/vite-plugin-angular to devDependencies, while tests cover missing and already-declared plugin scenarios.

Estimated code review effort: 2 (Simple) | ~10 minutes

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.test.ts (1)

364-370: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Move mock setup into beforeEach.

This test configures mockPromptConfirm, mockReadFile, and getAllDependencies inside the test body. Put these behaviors in a nested beforeEach for the existing-plugin scenario so the test follows the repository’s setup convention.

As per coding guidelines, “Implement mock behaviors in beforeEach blocks in Vitest tests” and “Avoid inline mock implementations within test cases.”

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.test.ts`
around lines 364 - 370, Move the mockPromptConfirm, mockReadFile, and
mockPackageManager.getAllDependencies setup for the existing-plugin scenario
into a nested beforeEach, leaving the it test focused only on executing
assertions and behavior. Preserve the current mocked values and scope the setup
to that scenario.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.ts`:
- Around line 531-534: Update the duplicate check in the migration logic around
`packageManager.getAllDependencies()` to also inspect `optionalDependencies`
when determining whether `@analogjs/vite-plugin-angular` is already declared,
while preserving the existing dev-dependency behavior. Extend the
`getAllDependencies()` test helper contract as needed and add a regression test
covering the optional-dependency case.

---

Nitpick comments:
In
`@code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.test.ts`:
- Around line 364-370: Move the mockPromptConfirm, mockReadFile, and
mockPackageManager.getAllDependencies setup for the existing-plugin scenario
into a nested beforeEach, leaving the it test focused only on executing
assertions and behavior. Preserve the current mocked values and scope the setup
to that scenario.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d1c04642-e260-4032-92ae-2323a53b52b8

📥 Commits

Reviewing files that changed from the base of the PR and between d0d717c and 8487b1a.

📒 Files selected for processing (2)

• code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.test.ts
• code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.ts

[github-actions]

	Fails
🚫	node failed.

Log

Details

Error:  Error: Could not find the Dangerfile at scripts/dangerfile.ts - if it is local, perhaps you have a typo? If it's using a remote file, it doesn't have a repo reference.
    at /usr/src/danger/dist/platforms/GitHub.js:161:27
    at step (/usr/src/danger/dist/platforms/GitHub.js:44:23)
    at Object.next (/usr/src/danger/dist/platforms/GitHub.js:25:53)
    at /usr/src/danger/dist/platforms/GitHub.js:19:71
    at new Promise (<anonymous>)
    at __awaiter (/usr/src/danger/dist/platforms/GitHub.js:15:12)
    at Object.executeRuntimeEnvironment (/usr/src/danger/dist/platforms/GitHub.js:144:88)
    at /usr/src/danger/dist/commands/danger-runner.js:101:47
    at step (/usr/src/danger/dist/commands/danger-runner.js:34:23)
    at Object.next (/usr/src/danger/dist/commands/danger-runner.js:15:53)
danger-results://tmp/danger-results-b8a58eb8.json

Generated by 🚫 dangerJS against 8487b1a

[shilman]

Ran the following steps:

1. pnpm create storybook@next => choose webpack
2. pnpx storybook automigrate angular-to-angular-vite
3. pnpm storybook

The dependency in the QA instructions installs, but Storybook fails with:

Internal server error: Failed to resolve import "zone.js" from
│  ".storybook/preview.ts". Does the file exist?

Fixed following manual steps in #36008 but as a user I shouldn't have to do anything?