Angular: Properly merge builder options and browserTarget options

[kroeder]

Closes #32105

What I did

Merging builder options and browser target options now properly only merges explicitly set properties.

Before, the code relied on an object that got populated by Angular and contained every property available.
If user-land has not defined, e.g. styles: ["something"], then Angular has set the value to styles: []
This caused an auto-overwrite of the browser target options.

The new behavior only overwrites browser target options, if user-land explicitly has set builder options

Checklist for Contributors

Testing

For me, looking at the existing test cases, it was hard to write a test that provides actual confidence. However I tried it, I had to mock it in a way that would end up in a false confidence.

It would be nice if someone could help me out with that.

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!

Verify it does load styles from the browserTarget

1. Create an Angular sandbox project
2. Check that angular.json does not contain styles: [] for the storybook target
3. Modify "styles.scss" to contain e.g. button { display: none !important; }
4. Run the sandbox and navigate to a button story -> it should load the styles from browserTarget, therefore the button is now invisible

Verify it's possible to overwrite the styles in the builder options

1. Create an Angular sandbox project
2. Check that angular.json contains e.g. styles: ["src/test.scss"] for the storybook target
3. Create and mofify "src/test.scss" to contain e.g. button { display: none !important; }
4. Run the sandbox and navigate to a button story -> it should load the styles from the builder options, therefore the button is now invisible

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

This PR fixes a critical bug in the Angular framework integration where Storybook's builder options were incorrectly overriding browser target configurations. The issue occurred because Angular pre-populates options.angularBuilderOptions with default values for all possible properties (e.g., styles: [] even when users haven't explicitly set styles), causing unintended overwrites of browser target settings.

The fix changes the merging logic in framework-preset-angular-cli.ts to use explicitAngularBuilderOptions obtained directly from builderContext.getTargetOptions() instead of the pre-populated options.angularBuilderOptions. This ensures that only explicitly user-defined options override browser target settings, preserving the expected inheritance behavior where Storybook configurations should inherit from the specified browserTarget unless explicitly overridden.

This change is part of the Angular framework's webpack configuration setup, which is responsible for merging build options from different sources. The modification maintains backward compatibility while restoring the correct precedence order: browser target options serve as defaults, and only explicitly defined Storybook builder options override them. This addresses a regression that affected styles, assets, and stylePreprocessorOptions inheritance from browserTarget configurations.

Confidence score: 4/5

• This fix addresses a well-defined regression with a targeted solution that preserves existing behavior
• The change is minimal and focused, reducing the risk of introducing new issues
• Manual testing steps are provided to verify both inheritance and override scenarios work correctly

[greptile-apps]

_{1 file reviewed, no comments}

_{Edit Code Review Bot Settings | Greptile}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 3575e12

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

---

☁️ Nx Cloud last updated this comment at 2025-08-28 09:58:10 UTC

[storybook-app-bot]

Package Benchmarks

^{Commit: 3575e12, ran on 28 August 2025 at 09:45:24 UTC}

No significant changes detected, all good. 👏

[kroeder]

fyi: since we now also use getTargetOptions for retrieving the builder options, it is always called once, and if theres a browserTarget, called twice

[kroeder]

@valentinpalkovic I fixed the failing tests and CI is now green 🙂

[kroeder]

@valentinpalkovic I just merged next into this branch and now, for the second time, a test runs into a timeout... is this a flacky test on main?

[valentinpalkovic]

Seems to be flaky. Let's rerun it.

[kroeder]

Is there anything I can do to help getting this merged? We currently use a workaround in our Storybook and I would love to remove that

[angelnikolov]

@kroeder I somehow found this PR after several hours of debugging the same issue.. Can you share what the workaround was so I can test it in our workspace while this gets merged?

[kroeder]

@kroeder I somehow found this PR after several hours of debugging the same issue.. Can you share what the workaround was so I can test it in our workspace while this gets merged?

@angelnikolov copy over everything you need from the "browserTarget" to the actual target

The problem this PR fixes is that if you don't set anything in the actual builder options, it initializes itself with an empty array/object. Therefore, you always overwrite what you would originally get from browserTarget

Example:

// this is broken
{
  "serve": {
    "executor": "@storybook/angular:start-storybook",
      "options": {
        "browserTarget": "storybook:build-storybook"
        // ...
      }
    }
  },
  "build-storybook": {
    "executor": "@storybook/angular:build-storybook",
      "options": {
        "styles": ["styles.scss"]
        // ...
      }
    }
  },
}

should be this

// this works
{
  "serve": {
    "executor": "@storybook/angular:start-storybook",
      "options": {
        "browserTarget": "storybook:build-storybook",
        "styles": ["styles.scss"]
        // ...
      }
    }
  },
  "build-storybook": {
    "executor": "@storybook/angular:build-storybook",
      "options": {
        "styles": ["styles.scss"]
        // ...
      }
    }
  },
}

[angelnikolov]

That was quick! Thanks!