Angular: Improve Vite compatibility

[ndelangen]

What I did

As I'm investigating a bug report, I noticed that the preset for angular adds the CJS versions of entrypoint files for the builder, which should be ESM.

This has not fully resolved the issue I'm working on, but it does seem to have solved an important issue.

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

I'm working with this repro:
https://github.com/eSpoc/vangular-storybook-minimal

And the issue was:

Uncaught ReferenceError: exports is not defined at config.js

This PR does solve that specific problem, it seems. That error is no longer there.
There's still another Error I need to solve it seems, but that might go in another PR.

The remaining error is:

NG0200: Circular dependency in DI detected for RendererFactory2. Find more at https://angular.dev/errors/NG0200

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

• 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 PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

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

Greptile Summary

Updates Angular preset configuration to use ESM module extensions for preview annotations, improving Vite compatibility while maintaining webpack5 as the builder.

• Modified code/frameworks/angular/src/preset.ts to use .mjs extensions instead of .js for preview-related imports
• Changed require.resolve() calls for config, preview-prod, and docs/config files to use ESM extensions
• Maintains existing webpack5 builder configuration for the core build process
• Addresses compatibility issues while preserving current build infrastructure

[greptile-apps]

_{1 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile}

[greptile-apps]

style: Type assertion to StandaloneOptions could be replaced with proper type narrowing

[Copilot]

Pull Request Overview

This PR updates the Angular preset to load ESM entrypoints (.mjs) instead of CommonJS files for better Vite compatibility.

• Changed previewAnnotations imports from CJS to .mjs modules
• Updated production and docs preview entries to reference .mjs files

Comments suppressed due to low confidence (4)

code/frameworks/angular/src/preset.ts:16

• No automated tests appear to cover these new .mjs resolution paths. Consider adding unit tests to verify that previewAnnotations correctly includes the .mjs entrypoints.

export const previewAnnotations: PresetProperty<'previewAnnotations'> = async (

code/frameworks/angular/src/preset.ts:19

• Relying on require.resolve for ESM modules may not work in pure ESM contexts. Consider using Node's createRequire or import.meta.resolve to consistently locate .mjs modules.

const annotations = [...entries, require.resolve('./client/config.mjs')];

code/frameworks/angular/src/preset.ts:22

• Similar to above, using require.resolve for an .mjs production preview file could fail in ESM environments. You might switch to import.meta.resolve or a createRequire workaround.

annotations.unshift(require.resolve('./client/preview-prod.mjs'));

code/frameworks/angular/src/preset.ts:28

• For consistency and reliability in ESM builds, consider using import.meta.resolve or Node's createRequire instead of require.resolve when referencing .mjs files.

annotations.push(require.resolve('./client/docs/config.mjs'));

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 8d33332.

Command	Status	Duration	Result
nx run-many -t check -c production --parallel=7	✅ Succeeded	1s	View ↗
nx run-many -t build -c production --parallel=3	✅ Succeeded	2s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-06-06 10:47:44 UTC