Angular: only load webpack dependencies on demand

[sod]

The dependencies @angular-devkit/build-angular, @storybook/builder-webpack5 and webpack are only needed if you use webpack.

But if you use https://analogjs.org/docs/integrations/storybook to use angular + storybook via vite, then you only need @angular/build and @storybook/builder-vite instead.

The analogjs plugin still relies on @storybook/angular, but loading webpack dependencies on demand allows one to drop webpack dependencies.

/cc @brandonroberts

Summary by CodeRabbit

• Chores
  • Improved lazy loading to reduce initial setup time in the Angular framework preset, optimizing internal initialization and module loading behavior.
  • Small cleanup that reduces configuration-time overhead.
  • No changes to public APIs, exports, or runtime behavior—existing integrations and user-facing features remain unchanged.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: addbd14d-6d02-41ee-b58e-18480ace8706

📥 Commits

Reviewing files that changed from the base of the PR and between 5796de7 and cfa8f41.

📒 Files selected for processing (1)

• code/frameworks/angular/src/server/framework-preset-angular-cli.ts

---

📝 Walkthrough

Walkthrough

Top-level synchronous imports of WebpackDefinePlugin, WebpackIgnorePlugin, and the webpack config helper were moved into the webpackFinal function as dynamic imports, enabling lazy loading while keeping the public API unchanged.

Changes

Cohort / File(s)	Summary
Dynamic import refactor code/frameworks/angular/src/server/framework-preset-angular-cli.ts	Replaced top-level synchronous imports of WebpackDefinePlugin, WebpackIgnorePlugin, and the webpack config helper with dynamic imports inside webpackFinal, deferring module loading until runtime.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5 minutes

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

🧹 Nitpick comments (1)

code/frameworks/angular/src/server/framework-preset-angular-cli.ts (1)

21-22: Minor: Remove extraneous space in dynamic import.

Line 21 has an extra space between import and ( (await import ('@storybook/builder-webpack5')), while line 22 uses the conventional import(...) without a space. For consistency, remove the space.

Suggested fix

-  const { WebpackDefinePlugin, WebpackIgnorePlugin } = await import ('@storybook/builder-webpack5');
+  const { WebpackDefinePlugin, WebpackIgnorePlugin } = await import('@storybook/builder-webpack5');

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@code/frameworks/angular/src/server/framework-preset-angular-cli.ts` around
lines 21 - 22, The dynamic import for '@storybook/builder-webpack5' contains an
extraneous space ("await import ('@storybook/builder-webpack5')") causing
inconsistent style; change it to use the conventional no-space syntax ("await
import('@storybook/builder-webpack5')") to match the other dynamic import of
'./angular-cli-webpack' (refer to the symbols WebpackDefinePlugin,
WebpackIgnorePlugin and getWebpackConfig/getCustomWebpackConfig) so both imports
follow the same formatting.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@code/frameworks/angular/src/server/framework-preset-angular-cli.ts`:
- Around line 21-22: The dynamic import for '@storybook/builder-webpack5'
contains an extraneous space ("await import ('@storybook/builder-webpack5')")
causing inconsistent style; change it to use the conventional no-space syntax
("await import('@storybook/builder-webpack5')") to match the other dynamic
import of './angular-cli-webpack' (refer to the symbols WebpackDefinePlugin,
WebpackIgnorePlugin and getWebpackConfig/getCustomWebpackConfig) so both imports
follow the same formatting.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3140984d-d102-498e-a495-80030970af66

📥 Commits

Reviewing files that changed from the base of the PR and between e81fd16 and 5796de7.

📒 Files selected for processing (1)

• code/frameworks/angular/src/server/framework-preset-angular-cli.ts

[valentinpalkovic]

Hi @sod,

Thanks for your contribution! Could you please fix the eslint/Prettier issues?
https://app.circleci.com/jobs/github/storybookjs/storybook/1166667

[sod]

@valentinpalkovic my bad. Rebased and ran prettier.

[brandonroberts]

Nice work @sod. How are you planning to drop the Webpack dependencies even though @storybook/angular depends on them through the package.json?

[sod]

We use yarn 4. I added

  "resolutions": {
    "webpack": "https://registry.npmjs.org/@favware/skip-dependency/-/skip-dependency-1.1.1.tgz",
    "@storybook/builder-webpack5": "https://registry.npmjs.org/@favware/skip-dependency/-/skip-dependency-1.1.1.tgz"
  }

to the package.json, which removes it.