storybookjs/storybook

[Bug]: @angular/core signal-based contentChildren() returns array instead of Signal in Storybook (v9.0.18)

Open

#32,201 建立於 2025年8月6日

在 GitHub 查看
 (5 留言) (4 反應) (0 負責人)TypeScript (89,909 star) (10,058 fork)batch import
angularbughelp wantedsev:S2

描述

Describe the bug

When using Angular's signal-based content queries (e.g., contentChildren(Component)), the value is expected to be a Signal<T[]>, but in Storybook (v9.0.18), the property receives a plain array instead. This causes TypeError: <prop>() is not a function when accessing it like a signal.

The same component behaves correctly when running the Angular application normally.

Reproduction link

https://stackblitz.com/edit/github-4qbcuh7n?file=src%2Fapp%2Fselection-list%2Fselection-list-option.component.ts,src%2Fapp%2Fselection-list%2Fselection-list-components.ts,src%2Fapp%2Fselection-list%2Fselection-list.stories.ts&preset=node

Reproduction steps

1. Define a component with a signal-based @ContentChildren query:

import { Component, Signal, contentChildren } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `<ng-content></ng-content>`,
})
export class ParentComponent {
  options = contentChildren(ChildComponent);
}

2. Create a story:

export const Default = {
  render: () => ({
    template: `
      <app-parent>
        <app-child></app-child>
      </app-parent>
    `,
  }),
};

3. In the component, access the signal:

ngAfterContentInit() {
  console.log(this.options());
}

Expected Behavior

  • this.options should be a Signal<T[]>
  • this.options() should return the array of child components
  • Behavior should match standard Angular runtime

Actual Behavior

  • In Storybook, this.options is a plain array instead of a signal
  • Calling this.options() throws TypeError: not a function

System

System:
  OS: Windows 11 10.0.22631
  CPU: (22) x64 Intel(R) Core(TM) Ultra 7 155H
Binaries:
  Node: 22.14.0 - C:\nvm4w\nodejs\node.EXE
  npm: 10.9.2 - C:\nvm4w\nodejs\npm.CMD <----- active
Browsers:
  Edge: Chromium (132.0.2957.115)
npmPackages:
  @storybook/addon-a11y: ^9.0.18 => 9.0.18
  @storybook/addon-designs: ^10.0.2 => 10.0.2
  @storybook/addon-docs: ^9.0.18 => 9.0.18
  @storybook/addon-links: ^9.0.18 => 9.0.18
  @storybook/addon-onboarding: ^9.0.18 => 9.0.18
  @storybook/addon-themes: ^9.0.18 => 9.0.18
  @storybook/angular: ^9.0.18 => 9.0.18
  storybook: ^9.0.18 => 9.0.18

Additional context

No response

貢獻者指南