Breaks Angular components using arrays

[Fydon]

Describe the bug
Storybook replaces array values with a string containing the array as text. A value initialised to an empty array in the component, i.e. [], is replaced with the string "[]" by Storybook. A value initialised to ['foo', 'bar'] is changed to "['foo', 'bar']".

To Reproduce
I've taken an example from Angular Material and added Storybook. DefaultWithErrors is a story with the default setup, which displays correctly but has errors in the browser console. Better is a story that fixes the errors by duplicating the initial state of the component in the story, but this breaks the Control for dataSource. The Stackblitz of this may require running turbo run storybook, if it the attempt on load fails.

System
npx sb info

  System:
    OS: Windows 10 10.0.19043
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.6.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.39)    
  npmPackages:
    @storybook/addon-actions: 6.4.22 => 6.4.22
    @storybook/addon-essentials: 6.4.22 => 6.4.22
    @storybook/addon-interactions: 6.4.22 => 6.4.22
    @storybook/addon-links: 6.4.22 => 6.4.22
    @storybook/angular: 6.4.22 => 6.4.22
    @storybook/builder-webpack5: 6.4.22 => 6.4.22
    @storybook/manager-webpack5: 6.4.22 => 6.4.22
    @storybook/testing-library: 0.0.11 => 0.0.11

[Fydon]

I have found a complete workaround for this simple example, which I've pushed to the repository. However this workaround does not work for more complex components. I also added stories showing that disabling controls or manually defining the type still results in error in the browser console, which result in errors for more complex components.

[szykov]

I confirm that too:
Cannot find a differ supporting object '[1, 2, 3]' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

I have updated from 6.4.22 to 6.5.3

In the code I have a property like this:
public foo: number[] = [1, 2, 3];

[Squixx]

This is even worse, and also happens in storybook 6.4.22

When properties are not explicitly set in your storyfiles
e.g.

fromModule.args = {
  showOverview$: new BehaviorSubject<boolean>(true),
  destroy$: new Subject<boolean>(),
};

storybook will just replace object files with a string value.

[] => "[]"
new BehaviorSubject(true) => "new BehaviorSubject(true),"
new Subject() => "new Subject()"

[Squixx]

should prob refer to #17004

[khepf]

any updates on this issue?

[Fydon]

In theory #19935 has probably fixed this, but I can't get Storybook 7 to work. It may be because I use @angular-builders/custom-webpack as my builder.

[Fydon]

Since updating to Storybook 7.0 I'm no longer experiencing this problem. Thank you.

[paddotk]

I'm on Storybook 7.5.2 and am experiencing the same issue. It keeps giving me the error Error: Missing expected ] at column 9 in [[object Object]]