fix: angular framework options by arty-name · Pull Request #33190 · storybookjs/storybook

arty-name · 2025-11-26T14:21:15Z

Closes #31908

What I did

Added code to propagate the angularBuilderOptions from main.ts#framework.options to the options

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

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Configure main.ts to include e.g.

  framework: {
    name: '@storybook/angular',
    options: {
      angularBuilderOptions: {
        styles: ['src/styles.css'],
      },
    },
  },

Verify that styles is present in options.angularBuilderOptions

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 publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

Bug Fixes
- Fixed merging of Angular builder options so CLI-provided settings properly override framework defaults and final build options are synchronized before target evaluation.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

arty-name · 2025-11-26T14:24:27Z

While #31908 mentions two workarounds, one of them requires modification of the storybook file, and another needs storybook to be run through ng+angular.json. I run storybook as storybook dev and I can’t activate zoneless Angular via the main.ts#framework.options

valentinpalkovic · 2025-11-26T14:24:32Z

Hi @arty-name

Thank you for your contribution.

angularBuilderOptions is not an option in the Storybook framework. Instead, the builder options have to be defined in your nx/angular.json's builder configuration for storybook and build-storybook. For more info: https://storybook.js.org/docs/get-started/frameworks/angular

arty-name · 2025-11-26T14:28:05Z

Thank you for the prompt response, @valentinpalkovic!

I’ve finished writing my explanation of why ng+angular.json is not a good fit for my case right before your comment came in.

This PR doesn’t modify the core of storybook, only the Angular plugin, which already deals with angularBuilderOptions quite some. I’m just extending this a little more.

nx-cloud · 2025-11-26T14:29:03Z

View your CI Pipeline Execution ↗ for commit b718d7a

☁️ Nx Cloud last updated this comment at 2025-12-08 16:03:16 UTC

valentinpalkovic · 2025-11-26T14:34:10Z

Can you elaborate of why you're running storybook dev. This is discouraged when using @storybook/angular. I can imagine that you're poking around with Analog.js' Vite-based Storybook framework?

arty-name · 2025-11-26T14:46:02Z

That’s the right guess! Our Angular projects use Vite for building, and Analog’s @analogjs/vite-plugin-angular and @analogjs/storybook-angular come in handy.

Using the standard storybook dev with them worked as a possible and more lightweight option.

coderabbitai · 2025-12-01T14:19:15Z

📝 Walkthrough

Walkthrough

Merge framework-provided angularBuilderOptions into CLI-provided angularBuilderOptions inside getBuilderOptions when framework options contain entries, so framework values are deep-merged into the final options.angularBuilderOptions before explicit target options are evaluated. No public APIs changed.

Changes

Cohort / File(s)	Summary
Angular CLI framework preset `code/frameworks/angular/src/server/framework-preset-angular-cli.ts`	In `getBuilderOptions`, if `options.frameworkOptions.angularBuilderOptions` has keys, deep-merge it into `options.angularBuilderOptions` and assign back, so framework-provided `angularBuilderOptions` are incorporated prior to reading explicit target options.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Review focus: getBuilderOptions merging logic and ensuring deepMerge semantics are correct and ordering (merge before target evaluation) is preserved.

Possibly related PRs

Angular: Enable experimental zoneless detection on Angular v21 #32580: Modifies framework-preset-angular-cli.ts related to how angularBuilderOptions are composed/propagated (e.g., handling experimentalZoneless in final builder options).

✨ Finishing touches

📝 Generate docstrings

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f0c0e14 and b718d7a.

📒 Files selected for processing (1)

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

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use ESLint and Prettier configurations that are enforced in the codebase

Files:

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

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Enable TypeScript strict mode

Files:

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

code/**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

code/**/*.{ts,tsx,js,jsx,mjs}: Use server-side logger from 'storybook/internal/node-logger' for Node.js code
Use client-side logger from 'storybook/internal/client-logger' for browser code
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

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

code/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Export functions that need to be tested from their modules

Files:

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

code/**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

code/**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier with --write flag to format code before committing
Run ESLint with yarn lint:js:cmd to check for linting issues and fix errors before committing

Files:

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

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: normal
GitHub Check: Core Unit Tests, windows-latest

🔇 Additional comments (1)

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

133-140: angularBuilderOptions deep-merge and override order look correct

The new block correctly deep-merges frameworkOptions.angularBuilderOptions into options.angularBuilderOptions, using framework values as defaults and letting existing/CLI-provided options override them. This matches the intended behavior from the linked issue without introducing obvious runtime risks.

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

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

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 28fa98e and f0c0e14.

📒 Files selected for processing (1)

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

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use ESLint and Prettier configurations that are enforced in the codebase

Files:

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

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Enable TypeScript strict mode

Files:

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

code/**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

code/**/*.{ts,tsx,js,jsx,mjs}: Use server-side logger from 'storybook/internal/node-logger' for Node.js code
Use client-side logger from 'storybook/internal/client-logger' for browser code
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

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

code/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Export functions that need to be tested from their modules

Files:

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

code/**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

code/**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier with --write flag to format code before committing
Run ESLint with yarn lint:js:cmd to check for linting issues and fix errors before committing

Files:

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

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: normal
GitHub Check: nx

valentinpalkovic · 2026-03-10T09:47:25Z

We are actively working on a @storybook/angular-vite framework, which will be based on Analog's Vite plugin infrastructure. Closing this PR in favour of the new framework, which should solve the issue holistically.

arty-name · 2026-03-10T12:03:33Z

Great news, looking forward to this!

fix: angular framework options

f0c0e14

valentinpalkovic added bug angular ci:normal Run our default set of CI jobs (choose this for most PRs). labels Dec 1, 2025

coderabbitai Bot reviewed Dec 1, 2025

View reviewed changes

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

valentinpalkovic self-assigned this Dec 1, 2025

fix: keep nested properties

b718d7a

github-actions Bot added the Stale label Dec 22, 2025

valentinpalkovic closed this Mar 10, 2026

valentinpalkovic added this to Core Team Projects Mar 10, 2026

github-project-automation Bot moved this to Done in Core Team Projects Mar 10, 2026

arty-name deleted the fix/angular-framework-options branch March 10, 2026 12:03

Uh oh!

Conversation

arty-name commented Nov 26, 2025 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

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

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Summary by CodeRabbit

Uh oh!

arty-name commented Nov 26, 2025

Uh oh!

valentinpalkovic commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

arty-name commented Nov 26, 2025

Uh oh!

nx-cloud Bot commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

valentinpalkovic commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

arty-name commented Nov 26, 2025

Uh oh!

coderabbitai Bot commented Dec 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

valentinpalkovic commented Mar 10, 2026

Uh oh!

arty-name commented Mar 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

arty-name commented Nov 26, 2025 •

edited by coderabbitai Bot

Loading

valentinpalkovic commented Nov 26, 2025 •

edited

Loading

nx-cloud Bot commented Nov 26, 2025 •

edited

Loading

valentinpalkovic commented Nov 26, 2025 •

edited

Loading

coderabbitai Bot commented Dec 1, 2025 •

edited

Loading