[Bug]: Angular - Wrong detection of standalone components when inheriting

[gionkunz]

Describe the bug

We have experienced weird occurances of the following errors "Unexpected directive ..... imported by the module. Please add an @NgModule annotation. StorybookComponentModule" in some of our stories that we could not really explain.

Currently the logic to detect if a component or directive is standalone is done here:
https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts#L173-L180

This meta data is then used to prepare the JIT compilation of an inline module (StorybookComponentModule). If the component passed in the Storybook story with the component property is detected as standalone component, the Storybook Angular framework addon is automatically adding the component at the end of the imports of the StorybookComponentModule.

The logic here https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts#L173-L180 might be working for most use-cases. However, we are facing some situations where this will not work as expected. In the case of component inheritance CompA(standalone) -> B(standalone) -> C(no standalone), all three Component Meta objects are returned from reflectionCapabilities.annotations(component). In this case the logic to detect if our referenced component (C, which is not standalone) will falsely detect the component as standalone (Because the use of some, checking on all three component meta objects).

To Reproduce

1. Create a Standalone Component A
2. Create a non-standalone component B that inherits from the previous standalone component A
3. Create a Story that references the B
4. Put the import of the NgModule that contains component B into the moduleMetadata section
5. The page should now show the error "Unexpected directive ..... imported by the module. Please add an @NgModule annotation. StorybookComponentModule" because the component B is mistaken as a standalone component and was added to the import list of the StorybookComponentModule.

System

Storybook Environment Info:

  System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (24) x64 12th Gen Intel(R) Core(TM) i7-12800HX
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.12.1 - ~/.nvm/versions/node/v20.12.1/bin/node
    npm: 10.5.1 - ~/.nvm/versions/node/v20.12.1/bin/npm <----- active
  npmPackages:
    @storybook/addon-a11y: 7.6.6 => 7.6.6 
    @storybook/addon-actions: 7.6.6 => 7.6.6 
    @storybook/addon-backgrounds: 7.6.6 => 7.6.6 
    @storybook/addon-controls: 7.6.6 => 7.6.6 
    @storybook/addon-designs: 7.0.7 => 7.0.7 
    @storybook/addon-docs: 7.6.6 => 7.6.6 
    @storybook/addon-essentials: 7.6.6 => 7.6.6 
    @storybook/addon-themes: 7.6.6 => 7.6.6 
    @storybook/addon-viewport: 7.6.6 => 7.6.6 
    @storybook/angular: 7.6.6 => 7.6.6 
    @storybook/core-common: 7.6.6 => 7.6.6 
    @storybook/core-server: 7.6.6 => 7.6.6 
    @storybook/manager-api: 7.6.6 => 7.6.6 
    @storybook/mdx1-csf: 1.0.0 => 1.0.0 
    @storybook/preview-api: 7.6.6 => 7.6.6 
    @storybook/theming: 7.6.6 => 7.6.6 
    eslint-plugin-storybook: 0.6.15 => 0.6.15 
    storybook: 7.6.6 => 7.6.6

Additional context

No response

[dario-baumberger]

#26056 mentions the same problem, with less specific description but with (more) comments and a workaround.

[shilman]

closing as dupe to #26056