Describe the bug

💥 Summary

In Storybook 9 (@storybook/[email protected]), setting angularBuilderOptions via:

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

has no effect. The values are never propagated to options.angularBuilderOptions inside the Angular builder logic (framework-preset-angular-cli.js), and are effectively ignored.

This breaks expected behavior and causes builderOptions.styles to be empty, even when valid styles are configured in .storybook/main.ts.

✅ Expected Behavior

If a user defines framework.options.angularBuilderOptions in .storybook/main.ts, those values should be passed through to the internal getBuilderOptions() logic, where they override or merge with browserTargetOptions.

❌ Actual Behavior

The framework.options.angularBuilderOptions exists in the root config object, confirmed via console.log(options.frameworkOptions) during preset evaluation.

However, inside **getBuilderOptions()**, the options object contains only:

angularBuilderOptions: {
  styles: [],
  assets: [],
  ...
}

– the values from main.ts are not present.

📌 Root Cause

framework.options.angularBuilderOptions is never merged or assigned to options.angularBuilderOptions during Storybook’s config normalization or builder preparation.

Even though it exists under frameworkOptions, it does not reach the options object passed to Angular's getBuilderOptions() function.

💡 Proposed Fix

In framework-preset-angular-cli.ts (or .js compiled version), inside getBuilderOptions(), add this fallback merge:

if (
  options.frameworkOptions &&
  options.frameworkOptions.angularBuilderOptions &&
  Object.keys(options.frameworkOptions.angularBuilderOptions).length > 0
) {
  options.angularBuilderOptions = {
    ...options.frameworkOptions.angularBuilderOptions,
    ...options.angularBuilderOptions, // allow override by CLI if present
  };
}

This allows users to configure angularBuilderOptions directly from .storybook/main.ts.

✅ Workaround

Use hardcoded override in framework-preset-angular-cli.js:

options.angularBuilderOptions = {
  styles: ['src/styles.css'],
  assets: ['src/assets'],
};

Or add styles to angular.json, which still works.

🧩 Suggestion

Make Storybook core correctly map:

framework.options.angularBuilderOptions → options.angularBuilderOptions

during config normalization, like it's done for other frameworks and builder options.

🗂 Version Info

@storybook/angular: 9.0.12

Angular: 19.1.x

Node: 20.x

Reproduced consistently with minimal project

Reproduction link

https://stackblitz.com/edit/github-hghuakgj?file=src%2Fstyles.css

Reproduction steps

How to Reproduce

Create a project using Angular + Storybook 9

Add valid styles in framework.options.angularBuilderOptions inside .storybook/main.ts

Leave angular.json styles empty

Log builderOptions.styles inside framework-preset-angular-cli.js

Result: [] – styles are not applied

In the sandbox project the .css file should load the pink background in the Storybook page and it doesn't.

System

System:
    OS: Linux 6.14 Fedora Linux 41 (Workstation Edition)
    CPU: (16) x64 AMD Ryzen 7 5700G with Radeon Graphics
    Shell: 5.2.32 - /bin/bash
  Binaries:
    Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
    npm: 11.2.0 - ~/.nvm/versions/node/v22.14.0/bin/npm <----- active
  Browsers:
    Chrome: 136.0.7103.113
  npmPackages:
    @storybook/addon-a11y: ^9.0.12 => 9.0.12 
    @storybook/addon-docs: ^9.0.12 => 9.0.12 
    @storybook/addon-links: ^9.0.12 => 9.0.12 
    @storybook/addon-themes: ^9.0.12 => 9.0.12 
    @storybook/angular: ^9.0.12 => 9.0.12 
    eslint-plugin-storybook: ^9.0.12 => 9.0.12 
    storybook: ^9.0.12 => 9.0.12

Additional context

No response