Angular 19 and Storybook 8.4.4: Storybook still requires the standalone option - Stack Overflow

admin管理员组

文章数量:1333631

I upgraded my angular UI library to Angular 19 and storybook 8.4.4. At the time being, these are both the latest version. With Angular-cli 19, standalone components become the default choice, where the standalone: true option is not present anymore in the decorator, like:

Before Angular 19 (14, 15, 16, 17, 18)

@Component({
  standalone: true,
  imports: [CommonModule],
  selector: 'app-my-component',
  templateUrl: './my-component.html',
})
export class MyComponent { }

Angular 19

@Component({
  imports: [CommonModule],
  selector: 'app-my-component',
  templateUrl: './my-component.html',
})
export class MyComponent { }

This breaks however when trying to run Storybook. When the standalone option is not present in the decorator, this results in a declaration error:

Error: Unexpected "ButtonComponent" found in the "declarations" array of the "StorybookComponentModule" NgModule. ButtonComponent" is marked as standalone and can't be declared in any NgModule - did you intend to import it instead (by adding it to the "imports" array)?

Apparently, the declarations error in Storybook occurs because Storybook internally generates a temporary Angular module (StorybookComponentModule) to wrap components and their metadata. This module is not visible, but it is where Storybook attempts to add the component to the declarations array.

So for the moment, the only fix is to manually add the option to the component. I guess it will also be the case for pipes and directives.

I upgraded my angular UI library to Angular 19 and storybook 8.4.4. At the time being, these are both the latest version. With Angular-cli 19, standalone components become the default choice, where the standalone: true option is not present anymore in the decorator, like:

Before Angular 19 (14, 15, 16, 17, 18)

@Component({
  standalone: true,
  imports: [CommonModule],
  selector: 'app-my-component',
  templateUrl: './my-component.html',
})
export class MyComponent { }

Angular 19

@Component({
  imports: [CommonModule],
  selector: 'app-my-component',
  templateUrl: './my-component.html',
})
export class MyComponent { }

This breaks however when trying to run Storybook. When the standalone option is not present in the decorator, this results in a declaration error:

Error: Unexpected "ButtonComponent" found in the "declarations" array of the "StorybookComponentModule" NgModule. ButtonComponent" is marked as standalone and can't be declared in any NgModule - did you intend to import it instead (by adding it to the "imports" array)?

Apparently, the declarations error in Storybook occurs because Storybook internally generates a temporary Angular module (StorybookComponentModule) to wrap components and their metadata. This module is not visible, but it is where Storybook attempts to add the component to the declarations array.

So for the moment, the only fix is to manually add the option to the component. I guess it will also be the case for pipes and directives.

• angular
• storybook
• angular-storybook
• angular19

Share Improve this question Follow edited Nov 21, 2024 at 9:00 Kurt Van den Branden asked Nov 20, 2024 at 16:42 Kurt Van den BrandenKurt Van den Branden 13k1010 gold badges8080 silver badges9090 bronze badges 1

• 1 A PR is pending to fix this : github/storybookjs/storybook/pull/… – Matthieu Riegler Commented Nov 20, 2024 at 19:55

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The storybook release 8.4.5 (released on November 20, 2024) fixes this:

• Angular: Support v19 - #29659

本文标签： Angular 19 and Storybook 844 Storybook still requires the standalone optionStack Overflow