CODEWITHSUNDEEP
angularstorybookangular-storybookangular19
Kurt Van den Branden
Kurt Van den Branden

Reputation: 12934

Angular 19 and Storybook 8.4.4: Storybook still requires the standalone option

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.

Upvotes: 5

Views: 889

Answers (1)

Daniel Rose
Daniel Rose

Reputation: 17638

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

  • Angular: Support v19 - #29659

Upvotes: 0

Related Questions