We’re looking for guidance on configuring Storybook for an Angular 19 “shared/components” library inside an Nx workspace while following the official Nx Storybook + Angular recipe.

[akarshweb]

We’re looking for guidance on configuring Storybook for an Angular 19 “shared/components” library inside an Nx workspace while following the official Nx Storybook + Angular recipe.

We are not able to share project files or logs, but the goal is simply: use Storybook to develop and document components that live in a shared Angular library within an Nx monorepo.

What we followed (Nx recipe)

From https://nx.dev/technologies/test-tools/storybook/recipes/overview-angular:

1. Installed Storybook for Angular:
   • Storybook packages pinned to 8.6.14 for consistency:
     • @storybook/[email protected]
     • @storybook/[email protected]
     • @storybook/[email protected]
     • @storybook/[email protected]
     • @storybook/[email protected]
     • [email protected]
2. Generated Storybook configuration for an Angular library:
   • Used Nx generators to set up Storybook for an existing Angular library (the shared/components library).
   • Ensured a standard story pattern that finds stories under the library, e.g.:
     • libs/**/src/**/*.stories.@(ts|mdx)
3. Verified Angular compatibility:
   • Workspace is on Angular 19.x and Nx (latest compatible with Angular 19).
   • Using the Angular builder approach for Storybook 8, per the recipe and Storybook docs.
4. Tried both approaches (per docs and community notes):
   • Explicitly specifying Angular options (e.g., framework: { name: '@storybook/angular' } with and without options configured).
   • Omitting advanced options to let Storybook handle Angular compilation automatically (no custom core.builder, avoiding legacy config).

Where we’re stuck

We need clarity on the recommended, current approach to wire up a library-level Storybook in an Nx + Angular 19 setup:

• For a shared Angular library (not an app), should we provide an Angular build target (e.g., via angularBrowserTarget) or omit it entirely when using Storybook 8.6.14 in Nx?
• What is the recommended story discovery config for Nx libraries so Storybook reliably finds stories under libs/shared/components?
• Are there any additional Nx-specific steps for Angular 19 libraries to ensure Storybook can compile and render component stories (e.g., builder options, tsconfig layering, or project target naming conventions)?

We’ve reviewed various migration notes and the Nx recipe, but would appreciate an authoritative, minimal example (or official guidance) for:

• Nx monorepo
• Angular 19
• Storybook 8.6.14
• Library-level Storybook for a shared components library (not an application)
• With all Storybook packages on the same version

What we’ve tried (high-level, anonymized)

• Keeping all Storybook packages on 8.6.14 to avoid peer conflicts.
• Running the official Storybook automigration for 8.x.
• Using both:
  • A config with explicit Angular framework options (and trying presence/absence of angularBrowserTarget).
  • A simplified config without advanced Angular options to let Storybook manage compilation.
• Ensuring story patterns include the library, e.g. libs/**/src/**/*.stories.*.
• Generating and using the Nx Storybook targets for the library.

Environment (generic)

• OS: Windows
• Node/npm: Current LTS
• Nx: Latest compatible with Angular 19
• Angular: 19.x
• Storybook: 8.6.14 (all Storybook packages aligned)

Ask

Could you provide the recommended, minimal configuration for a library-level Storybook in Nx + Angular 19 with Storybook 8.6.14, including:

• Example framework configuration for Angular in Nx
• Whether a library needs angularBrowserTarget (and if so, what it should point to in a typical Nx workspace)
• A canonical story pattern and any tsconfig tips for libs/shared/components
• Any Nx-specific caveats for Angular 19 libraries

---

below is our

npx nx report

NX Report complete - copy this into the issue template

Node : 22.0.0
OS : win32-x64
Native Target : x86_64-windows
npm : 10.5.1

nx : 20.4.6
@nx/js : 21.4.0
@nx/jest : 20.4.6
@nx/eslint : 20.4.6
@nx/workspace : 20.4.6
@nx/angular : 20.4.6
@nx/cypress : 20.4.6
@nx/devkit : 20.4.6
@nx/eslint-plugin : 20.4.6
@nx/module-federation : 20.4.6
@nx/plugin : 20.4.6
@nx/storybook : 21.4.0
@nx/web : 21.4.0
@nx/webpack : 20.4.6
typescript : 5.7.3

Community plugins:
@ngrx/component-store : 19.0.1
@ngrx/operators : 19.2.1
@ngrx/signals : 19.2.1
@storybook/angular : 8.6.14
@syncfusion/ej2-angular-buttons : 27.2.4
@syncfusion/ej2-angular-calendars : 27.2.3
@syncfusion/ej2-angular-charts : 27.2.5
@syncfusion/ej2-angular-dropdowns : 27.2.5
@syncfusion/ej2-angular-gantt : 27.2.5
@syncfusion/ej2-angular-grids : 27.2.5
@syncfusion/ej2-angular-inputs : 27.2.4
@syncfusion/ej2-angular-kanban : 27.2.3
@syncfusion/ej2-angular-navigations : 27.2.5
@syncfusion/ej2-angular-notifications : 27.2.4
@syncfusion/ej2-angular-popups : 27.2.2
@syncfusion/ej2-angular-richtexteditor : 27.2.5
@syncfusion/ej2-angular-schedule : 27.2.5
@syncfusion/ej2-angular-splitbuttons : 27.2.2
ngx-daterangepicker-material : 6.0.4

The following packages should match the installed version of nx

• @nx/[email protected]
• @nx/[email protected]
• @nx/[email protected]

To fix this, run nx migrate [email protected]