[Bug]: Angular Standalone Directive & Storybook

[youurt]

Describe the bug

When adding a standalone angular directive to storybook, we can't have the component prop in the export default. Storybook then throws this:

Unexpected "TestDirective" found in the "declarations" array of the "StorybookComponentModule" NgModule, "TestDirective" 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)?

Error: Unexpected "TestDirective" found in the "declarations" array of the "StorybookComponentModule" NgModule, "TestDirective" 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)?
    at verifySemanticsOfNgModuleDef (http://localhost:4401/vendors-node_modules_angular-devkit_build-angular_node_modules_mini-css-extract-plugin_dist_h-76a7c1.iframe.bundle.js:66371:11)
    at StorybookComponentModule.get (http://localhost:4401/vendors-node_modules_angular-devkit_build-angular_node_modules_mini-css-extract-plugin_dist_h-76a7c1.iframe.bundle.js:66306:22)
    at getInjectorDef (http://localhost:4401/vendors-node_modules_angular-devkit_build-angular_node_modules_mini-css-extract-plugin_dist_h-76a7c1.iframe.bundle.js:43082:98)
    at walkProviderTree (http://localhost:4401/vendors-node_modules_angular-devkit_build-angular_node_modules_mini-css-extract-plugin_dist_h-76a7c1.iframe.bundle.js:51263:16)
    at walkProviderTree (http://localhost:4401/vendors-node_modules_angular-devkit_build-angular_node_modules_mini-css-extract-plugin_dist_h-76a7c1.iframe.bundle.js:51301:9)
    at http://localhost:4401/vendors-node_modules_angular-devkit_build-angular_node_modules_mini-css-extract-plugin_dist_h-76a7c1.iframe.bundle.js:51221:9
    at http://localhost:4401/vendors-node_modules_angular-devkit_build-angular_node_modules_mini-css-extract-plugin_dist_h-76a7c1.iframe.bundle.js:47677:74
    at Array.forEach (<anonymous>)
    at deepForEach (http://localhost:4401/vendors-node_modules_angular-devkit_build-angular_node_modules_mini-css-extract-plugin_dist_h-76a7c1.iframe.bundle.js:47677:9)
    at internalImportProvidersFrom (http://localhost:4401/vendors-node_modules_angular-devkit_build-angular_node_modules_mini-css-extract-plugin_dist_h-76a7c1.iframe.bundle.js:51212:3)

To Reproduce

You can reproduce this via this repo: https://github.com/youurt/org.

System

Environment Info:

  System:
    OS: macOS 13.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
  Browsers:
    Chrome: 114.0.5735.198
    Safari: 16.2
  npmPackages:
    @storybook/addon-essentials: ^7.0.24 => 7.1.0 
    @storybook/angular: ^7.0.24 => 7.1.0 
    @storybook/core-common: ^7.0.24 => 7.1.0 
    @storybook/core-server: ^7.0.24 => 7.1.0

Additional context

No response

[izengliang]

me too.

[Leon-Hikari]

You can get around that initial issue by simply leaving out the component declaration in the Meta.
Instead you have to import it in your Meta or Examples via the moduleMetaData. Additionally you will have to manually set each input in the Meta via the argTypes property.

However while this will render the story and give you all the controls (you manually defined in the story) this won't give you a generated JSDoc documentation from the directive. You can get around that by using mdx files (alone or additionally) to render each separate JSDoc block.

However this way you can't combine the controls that actually affect the story with your JSDoc, leaving you with two separate story blocks. For me this is a big annoyance and I'd love to see Angular Standalone Directives work the same way concerning the Storybook documentation as Angular Standalone Components do. 🙏

[vanessayuenn]

Since Storybook@7.5, standalone directives can be loaded! Can you give it a try and see if your issue is resolved? Thanks.

[youurt]

Since Storybook@7.5, standalone directives can be loaded! Can you give it a try and see if your issue is resolved? Thanks.

We will test it ASAP!

[Leon-Hikari]

Since Storybook@7.5, standalone directives can be loaded! Can you give it a try and see if your issue is resolved? Thanks.

Now it works as expected, thank you for the update 😃

It would be great if the official documentation now also mentioned this use case as a component is not the same as a directive and thus the current naming in the Meta interface is not intuitive 😉

[valentinpalkovic]

@Leon-Hikari Feel free to provide a PR to update the docs! It would be appreciated :) Otherwise cc @jonniebigodes