Angular: Bundle using TSup

[ndelangen]

What I did

Changes

• Modernizes the Angular framework build configuration to align with the rest of the repository
• Removes legacy webpack-env dependency and related configurations
• Updates TypeScript configuration to use modern module resolution
• Restructures builder configurations for better maintainability
• Optimizes the build process by removing unnecessary post-build scripts
• Updates package.json to use modern bundling approaches

Benefits

• 🎯 Reduced Bundle Size: Optimizes the Angular framework distribution by removing unnecessary dependencies and streamlining the build process
• 🔄 Consistency: Aligns Angular framework configuration with the rest of the repository, reducing maintenance overhead
• 🚀 Modern Build System: Updates to modern TypeScript and module resolution settings
• 📦 Improved Dependencies: Removes legacy webpack-env dependency and updates to more modern alternatives

Technical Details

• Removes @types/webpack-env dependency
• Updates TypeScript configuration to use moduleResolution: "bundler"
• Restructures builder configurations in builders.json
• Removes legacy post-build scripts
• Updates package.json to use modern bundling configuration

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 manually tested the angular sandbox, explicitly verifying that HMR does still work. (it does)

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

Comprehensive modernization of Angular framework build configuration in Storybook, replacing webpack with TSup bundler and optimizing TypeScript usage.

• Removes legacy @types/webpack-env dependency and related webpack configurations across 60+ files, switching to modern TSup bundling
• Converts regular imports to type-only imports using import type syntax throughout codebase for better tree-shaking and reduced bundle size
• Restructures builder configurations by moving from src/builders/ to root-level schema files and updating Angular CLI integration
• Updates TypeScript configuration to use moduleResolution: "bundler" and removes unnecessary post-build scripts
• Ensures proper handling of ElementRef imports for Angular DI system while optimizing other type imports

[nx-cloud]

View your CI Pipeline Execution ↗ for commit eef4990.

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	1m 12s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-06-11 10:57:18 UTC

[Copilot]

Pull Request Overview

Bundle the Angular framework using TSup by replacing the previous webpack-based build setup and updating config files accordingly.

• Consolidate and update TypeScript configs (tsconfig.json/tsconfig.spec.json), removing the old tsconfig.build.json.
• Refactor package exports and add TSup-specific bundler entries in package.json; move and rewrite builders.json to the package root.
• Update preset.ts to resolve dist paths via getAbsolutePath, and remove the postbuild compatibility script and webpack HMR references.

Reviewed Changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
code/frameworks/angular/tsconfig.spec.json	Removed webpack-env from types
code/frameworks/angular/tsconfig.json	Changed extends, added compiler options, adjusted include
code/frameworks/angular/tsconfig.build.json	Deleted legacy build config
code/frameworks/angular/src/preset.ts	Switched previewAnnotations to use absolute dist paths
code/frameworks/angular/src/client/index.ts	Dropped webpack-env ref and HMR stop code
code/frameworks/angular/scripts/postbuild.js	Removed postbuild compatibility hack
code/frameworks/angular/package.json	Added new exports, typesVersions, bundler entries, scripts
code/frameworks/angular/builders.json	Added root-level TSup-compatible builders.json

Comments suppressed due to low confidence (6)

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

• [nitpick] This docsConfig shadows the earlier docsConfig from presets.apply; consider renaming the path constant (e.g. docsPath) to avoid shadowing and improve clarity.

const docsConfig = join(getAbsolutePath('@storybook/angular'), 'dist/client/docs/config.mjs');

code/frameworks/angular/scripts/postbuild.js:1

• The postbuild script that added @ts-ignore for Angular <17.2 types was removed; without it, builds may fail on older Angular versions. Please ensure compatibility is handled elsewhere.

const fs = require('fs');

code/frameworks/angular/package.json:156

• [nitpick] You’ve added previewEntries and nodeEntries for TSup bundling but no tests; consider adding unit or integration tests to validate the bundle output and entry sets.

"bundler": {

code/frameworks/angular/tsconfig.spec.json:4

• Removing webpack-env from test types may cause missing global typings (like module.hot) during tests; please verify test environments or re-add the necessary types.

"types": ["node"],

code/frameworks/angular/tsconfig.json:10

• JSON imports are no longer included (src/**/*.json was removed); if you rely on importing JSON, add back "src/**/*.json" or enable resolveJsonModule.

"include": ["src/**/*", "./src/typings.d.ts"]

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

• Using require.resolve on a relative path may fail once packaged; for consistency with the config path above, consider join(getAbsolutePath('@storybook/angular'), 'dist/client/preview-prod.mjs').

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

[storybook-app-bot]

Package Benchmarks

^{Commit: eef4990, ran on 11 June 2025 at 11:06:34 UTC}

The following packages have significant changes to their size or dependencies:

@storybook/angular

	Before	After	Difference
Dependency count	209	199	🎉 -10 🎉
Self size	607 KB	189 KB	🎉 -418 KB 🎉
Dependency size	29.79 MB	29.70 MB	🎉 -94 KB 🎉
Bundle Size Analyzer	Link	Link

[greptile-apps]

_{108 files reviewed, 4 comments
Edit PR Review Bot Settings | Greptile}

[JReinhold]

for future reference, this is the main change