[Bug]: Angular 19: Unexpected Component found in the "declarations" array of the "StorybookComponentModule" NgModule

[Eirmas]

Describe the bug

When creating a story for a standalone component in Angular 19, it fails because the renderer tries to create an NgModule with the standalone component in its declarations array. This causes an error because standalone components can't be declared in any NgModule.

Reproduction link

https://stackblitz.com/edit/github-kskywf?file=src%2Fstories%2Fbutton.stories.ts

Reproduction steps

1. Update to angular 19
2. Create a standalone angular component
3. Create a story for this component like this:

export default {
  title: 'Title',
  component: MyComponent,
};

System

Storybook Environment Info:

  System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (14) x64 12th Gen Intel(R) Core(TM) i7-12700H
    Shell: 3.1.0 - /usr/bin/fish
  Binaries:
    Node: 22.5.1 - /usr/local/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm <----- active
    pnpm: 9.9.0 - ~/.local/share/pnpm/pnpm
  npmPackages:
    @storybook/addon-a11y: ^8.4.4 => 8.4.4 
    @storybook/addon-designs: ^8.0.4 => 8.0.4 
    @storybook/addon-docs: ^8.4.4 => 8.4.4 
    @storybook/addon-essentials: ^8.4.4 => 8.4.4 
    @storybook/addon-interactions: ^8.4.4 => 8.4.4 
    @storybook/angular: ^8.4.4 => 8.4.4 
    @storybook/channels: ^8.4.4 => 8.4.4 
    @storybook/core-events: ^8.4.4 => 8.4.4 
    @storybook/test: ^8.4.4 => 8.4.4 
    @storybook/test-runner: ^0.19.1 => 0.19.1 
    eslint-plugin-storybook: ^0.11.1 => 0.11.1 
    storybook: ^8.4.4 => 8.4.4

Additional context

A dirty fix to get it working is to not provide the component via the "component" option, but rather via the decorators property like this:

  decorators: [
    moduleMetadata({
      imports: [MyComponent],
    }),
  ],

We would not like to do it this way because it loses the ability to infer the argTypes

[json-derulo]

Still happening in v8.5.0-alpha.9 which claims to support Angular 19.

[kurti-vdb]

This is because the standalone: true option is missing in the component decorator. Although a workaround, if you add it by hand to the component, your stories will work. I guess it will also be the case for directives and pipes and that there won’t be a fast fix for this.

Created a stackoverflow issue for this too:
https://stackoverflow.com/q/79208200/4746087

[ingowagner]

I opened a PR that fixes this issue:
https://github.com/storybookjs/storybook/pull/29677/files

[droid-w]

This is because the standalone: true option is missing in the component decorator. Although a workaround, if you add it by hand to the component, your stories will work. I guess it will also be the case for services, directives, pipes… and that there won’t be a fast fix for this.

Created a stackoverflow issue for this too: https://stackoverflow.com/q/79208200/4746087

Hi man thanks, it work for me 👌👌👌👌

[kurti-vdb]

Still not fixed

[ingowagner]

Still not fixed

Are you using version 8.5.0-alpha.10?

[json-derulo]

For me the issue fixed with version 8.5.0-alpha.10 👍🏻