Angular: Inherit options from browserTarget

[gingeekrishna]

Closes #32105 - Angular + Webpack not picking up styles, assets and stylePreprocessorOptions from browserTarget

Angular framework properly inherits stylePreprocessorOptions from browserTarget

• Replaced shallow spread merge with deep merge in getBuilderOptions()
• Added deepMerge function that preserves nested properties from browserTarget
• Ensures stylePreprocessorOptions.includePaths, assets, and styles are inherited when not explicitly set in storybook target
• Maintains backward compatibility and override behavior when storybook options are provided
• Fixes regression introduced in v9 where nested configuration was being lost

What I did

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!

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 regression in Storybook's Angular framework where nested configuration properties like stylePreprocessorOptions.includePaths were being lost during configuration merging. The issue occurred in v9 when the framework switched to shallow spread merging ({...browserTargetOptions, ...options.angularBuilderOptions}), which overwrote entire nested objects instead of preserving inherited properties from the browserTarget.

The fix introduces a custom deepMerge function that recursively merges nested objects while preserving arrays and handling null/undefined values properly. This ensures that when Storybook-specific options don't specify nested properties, they are inherited from the browserTarget configuration, maintaining the expected behavior from v8 while still allowing complete override when needed.

The implementation adds comprehensive unit tests covering various merge scenarios including preservation of browserTarget options, override behavior, deep merging of nested objects, array handling, and complex nested structures. The tsConfig property continues to be handled separately to maintain existing fallback logic for locating TypeScript configuration files.

This change integrates with the existing Angular CLI webpack preset system in framework-preset-angular-cli.ts, specifically in the getBuilderOptions function that prepares configuration for the Angular build system within Storybook's webpack pipeline.

Confidence score: 4/5

• This is a well-implemented fix for a specific regression with comprehensive test coverage
• The implementation correctly handles edge cases and maintains backward compatibility
• The test file duplicates the deepMerge implementation instead of testing the actual exported function, which could lead to implementation drift

[greptile-apps]

_{2 files reviewed, 1 comment}

_{Edit Code Review Bot Settings | Greptile}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 635f853

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

---

☁️ Nx Cloud last updated this comment at 2025-07-23 08:31:22 UTC

[valentinpalkovic]

Could you please review the linting errors and the failing unit test?

[storybook-app-bot]

Package Benchmarks

^{Commit: b22e888, ran on 7 August 2025 at 06:30:37 UTC}

No significant changes detected, all good. 👏

[ctaepper]

Folks, could you please get this over the finish line? we updated our Nx workspace to latest including stroybook 9 and now all our storybooks are broken :(

[ctaepper]

this PR does unfortunely not fix the problem. there is still the same merge result, where options from the browserTarget config are ignored, like styles, assets, etc

tested with [email protected]

[gingeekrishna]

@ctaepper is the problem addressed or still it persist. I can work on this issue and get this addressed with in this week

[ctaepper]

The problem still persits. The source object (options.angularBuilderOptions) and the target object (browserTargetOptions) are correctly passed into the deepmerge function, but the merge is incorrect.

my concrete objects:

source:

{
  "stylePreprocessorOptions": {
    "includePaths": []
  },
  "styles": [],
  "assets": [],
  "preserveSymlinks": false,
  "sourceMap": false,
  "experimentalZoneless": false
}

target:

{
  "outputPath": "dist/apps/web/primeng-demo",
  "index": "apps/web/primeng-demo/src/index.html",
  "browser": "apps/web/primeng-demo/src/main.ts",
  "polyfills": [
    "zone.js",
    "@angular/localize/init"
  ],
  "tsConfig": "apps/web/primeng-demo/tsconfig.app.json",
  "inlineStyleLanguage": "scss",
  "assets": [
    {
      "glob": "**/*",
      "input": "apps/web/primeng-demo/public"
    }
  ],
  "styles": [
    "apps/web/primeng-demo/src/theme-overrides.scss",
    "apps/web/primeng-demo/src/styles.scss"
  ],
  "scripts": [],
  "localize": true,
  "budgets": [
    {
      "type": "initial",
      "maximumWarning": "500kb",
      "maximumError": "1mb"
    },
    {
      "type": "anyComponentStyle",
      "maximumWarning": "4kb",
      "maximumError": "8kb"
    }
  ],
  "outputHashing": "all"
}

and the result:

{
  "outputPath": "dist/apps/web/primeng-demo",
  "index": "apps/web/primeng-demo/src/index.html",
  "browser": "apps/web/primeng-demo/src/main.ts",
  "polyfills": [
    "zone.js",
    "@angular/localize/init"
  ],
  "tsConfig": "apps/web/primeng-demo/tsconfig.app.json",
  "inlineStyleLanguage": "scss",
  "assets": [], <-- should not be empty
  "styles": [], <-- should not be empty
  "scripts": [],
  "localize": true,
  "budgets": [
    {
      "type": "initial",
      "maximumWarning": "500kb",
      "maximumError": "1mb"
    },
    {
      "type": "anyComponentStyle",
      "maximumWarning": "4kb",
      "maximumError": "8kb"
    }
  ],
  "outputHashing": "all",
  "stylePreprocessorOptions": {
    "includePaths": []
  },
  "preserveSymlinks": false,
  "sourceMap": false,
  "experimentalZoneless": false
}

what interesting, is that the budgets (array of objects) are mergerd, but assets which is also an array of objects are not merged. and of course the styles property is missing.