Storybook Angular does not handle parent Component Outputs properly

[nzacca]

Describe the bug

When a Derived Component Story adds Outputs from a Base Class, the action is not logged to the Action Log and an error appears in the console:

DerivedComponent.html:4 ERROR TypeError: this.parentOutput.emit is not a function

Note: Outputs defined on the Derived Component work as expected.

To Reproduce

https://github.com/nzacca/nz-storybook-14968

Diff: nzacca/nz-storybook-14968@8d166a0

System

Environment Info:

  System:
    OS: Linux 4.4 Ubuntu 18.04.5 LTS (Bionic Beaver)
    CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor              
  Binaries:
    Node: 12.19.0 - ~/.nodenv/versions/12.19.0/bin/node
    Yarn: 2.4.1 - ~/.yvm/shim/yarn
    npm: 6.14.8 - ~/.nodenv/versions/12.19.0/bin/npm
  npmPackages:
    @storybook/addon-actions: ^6.3.0-alpha.29 => 6.3.0-alpha.29    
    @storybook/addon-docs: ^6.3.0-alpha.29 => 6.3.0-alpha.29       
    @storybook/addon-essentials: ^6.3.0-alpha.29 => 6.3.0-alpha.29 
    @storybook/addon-links: ^6.3.0-alpha.29 => 6.3.0-alpha.29      
    @storybook/angular: ^6.3.0-alpha.29 => 6.3.0-alpha.29 

Additional context

Problem appears to be that the Storybook handling for retrieving the Component props does not traverse the Component tree and only looks at the current Component.

https://github.com/storybookjs/storybook/blob/next/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.ts#L109

May need to do handling similar to what is done in Angular which traverses the tree and obtains all metadata:

https://github.com/angular/angular/blob/a92a89b0eb127a59d7e071502b5850e57618ec2d/packages/core/src/reflection/reflection_capabilities.ts#L251

[evtk]

hi @nzacca I think we are experiencing the same issue:

#15330

but so far it hasn't got any attention here. Did you have made any progress on this? It prevents us from updating to Angular 12 because of the webpack version.

[nzacca]

Hi @evtk

Yes, I agree, #15330 does sound like we're experiencing the same thing. I unfortunately have not been able to move on this. I can probably update my reproduction repo to include Input examples as you detailed on #15330 .

We have elected to proceed with our Angular upgrade without this. Unfortunate, but the benefits of Angular 12 outweigh our Storybook usage at this present time. Our workaround for now has been to use the Story template property to manually construct stories - not ideal for long term but our project is relatively small.

I'll see if I can do some more investigation/debugging this upcoming weekend but will probably need some guidance from a Storybook team member that is more familiar with the codebase.

[evtk]

Hi @shilman. Thanks for checking in. You have closed my issue and added a label P1 here. Does this mean it gets priority now? I do hope so :)

[shilman]

Let's see what the @storybookjs/angular team says!

[evtk]

@shilman So how are we gonna get their attention? We had to do an ugly custom decorator hack to put back parent component input bindings.

[shilman]

A PR would surely get their attention! 😉

[nzacca]

This issue appears to have been fixed by #15586 and is working in 6.4.0-alpha.24 as far as I can tell. I haven't done extensive testing but the reproduction I created above in my branch appears to be working correctly now.