Angular component get redeclared - that is regression compared to legacy Angular renderer (specific casees)

[kbrilla]

Describe the bug
Angular component get redeclared - that is regression compared to legacy Angular renderer (specific cases)

To Reproduce
for example:
/// button.module.ts

@NgModule({
  declarations: [
  ButtonComponent,
  imports: [CommonModule],
  exports: [ButtonComponent],
})
export class ButtonModule {}

export default {
  title: 'Components/Core/Button',
  component: ButtonComponent,
  decorators: [
    moduleMetadata({
      declarations: [],
      imports: [
[ButtonModule]],
    }),
  ],
} as Meta;

const Overview: Story<ButtonComponent> = (args) => ({
  props: args,
  template: `
<button loButton [variant]="variant" [size]="size" type="button" >
Button
</button>
</div>
`,
});

System
Storybook 6.3.4

Additional context
This is regression:
#6346
21e4997#diff-87c2ba58c37542c29b4838493e7f8bcdd62b593851e30671fd1bb081eb39530f

legacy helper has function that checks if component needs to be declared:

storybook/app/angular/src/client/preview/angular/helpers.ts

Line 85 in a8db958

const extractNgModuleMetadata = (importItem: any): NgModule => {

it exists in new renderer but with a bit limited functionality

storybook/app/angular/src/client/preview/angular-beta/utils/NgModulesAnalyzer.ts

Line 38 in c5749b0

const extractNgModuleMetadata = (importItem: any): NgModule => {

Other issues that were raised that actually are caused by this:
#14026

//edit

Ok so regression is smaller than I originally though
what is not working compared to old version of extractNgModuleMetadata is that when imports array has an item that is an array it is not flat mapped to pick up a imports from [] item;

weird thing is that extractNgModuleMetadata the same so mayby it is problem in another function higer up in call chain.

probably also something to do with having template or not as they are handled differently in both cases

storybook/app/angular/src/client/preview/angular/helpers.ts

Line 145 in a8db958

const componentRequiresDeclaration =

storybook/app/angular/src/client/preview/angular-beta/StorybookModule.ts

Line 66 in c5749b0

const requiresComponentDeclaration =

[parkersweb]

Is there any news on this one? We're seeing it cause a number of headaches in rendering stories using the docs add-on that makes it basically unusable at the moment...

[shilman]

@storybookjs/angular any thoughts on this one?

[shilman]

@parkersweb is using the legacy renderer an acceptable workaround until this gets sorted out?

[parkersweb]

@shilman yeah - I think I've found a pattern that gets me around the problem for now thanks 👍

[sir-captainmorgan21]

@parkersweb what workaround did you use?

[parkersweb]

@sir-captainmorgan21 I'm afraid its been a while since I looked in on the project that uses this so I don't recall exactly which change got us working.

We're currently running 6.4.19 - without the angular legacy renderer flag set. Our story meta looks something like this

<Meta
  title="Components/Avatar"
  component={AvatarComponent}
  decorators={[
    moduleMetadata({
      imports: [AvatarModule],
    }),
  ]}
/>

and that doesn't seem to cause issues? Sorry I couldn't be more helpful!

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).