[6.2.0-beta.1] Angular example stories throw "Unhandled Promise rejection: Type ButtonComponent is part of the declarations of 2 modules: StorybookModule and StorybookModule!"

Describe the bug Switching the examples stories (like the ButtonComponent) throws an error in the console and the component is not rendered at all. Works the first time, but as soon as you go to the same component stories is gonna throw this

Unhandled Promise rejection: Type ButtonComponent is part of the declarations of 2 modules: StorybookModule and StorybookModule! Please consider moving ButtonComponent to a higher module that imports StorybookModule and StorybookModule. You can also create a new NgModule that exports and includes ButtonComponent then import that NgModule in StorybookModule and StorybookModule. ; Zone: <root> ; Task: Promise.then ; Value: Error: Type ButtonComponent is part of the declarations of 2 modules: StorybookModule and StorybookModule! Please consider moving ButtonComponent to a higher module that imports StorybookModule and StorybookModule. You can also create a new NgModule that exports and includes ButtonComponent then import that NgModule in StorybookModule and StorybookModule.
    at verifySemanticsOfNgModuleDef (core.umd.js:27446)
    at Function.get (core.umd.js:27384)
    at getInjectorDef (core.umd.js:365)
    at R3Injector.push../node_modules/@angular/core/bundles/core.umd.js.R3Injector.processInjectorType (core.umd.js:11537)
    at core.umd.js:11401
    at core.umd.js:4380
    at Array.forEach (<anonymous>)
    at deepForEach (core.umd.js:4380)
    at new R3Injector (core.umd.js:11401)
    at createInjectorWithoutInjectorInstances (core.umd.js:11373) 

To Reproduce Steps to reproduce the behavior:

1. install 6.2.0-beta.1 (currently just npx sb upgrade --prerelease)
2. Open the console
3. Click on the button primary story
4. Click on the button secondary story
5. See error in console and component does not show

Expected behavior No errors are thrown and component can render in every story

Screenshots If applicable, add screenshots to help explain your problem.

System

Environment Info:

  System:
    OS: macOS 11.3
    CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
  Binaries:
    Node: 12.11.1 - ~/.nvm/versions/node/v12.11.1/bin/node
    Yarn: 1.3.2 - /usr/local/bin/yarn
    npm: 6.11.3 - ~/.nvm/versions/node/v12.11.1/bin/npm
  Browsers:
    Chrome: 88.0.4324.192
    Firefox: 81.0.2
    Safari: 14.1
  npmPackages:
    @storybook/addon-actions: ^6.2.0-beta.1 => 6.2.0-beta.1 
    @storybook/addon-essentials: ^6.2.0-beta.1 => 6.2.0-beta.1 
    @storybook/addon-links: ^6.2.0-beta.1 => 6.2.0-beta.1 
    @storybook/angular: ^6.2.0-beta.1 => 6.2.0-beta.1 

Additional context My main goal was to get this change in https://github.com/storybookjs/storybook/issues/10272#issuecomment-759355272 so I could manage the component ng-content. Also tried to install 6.2.0-alpha.13 directly but can see this issue there as well (plus the UI is flickering, but that seems fixed in later versions)

[ghost]

@snutij Can confirm the sorcery.

[tuuling]

I spent a good part of 2 days on this. I don’t know why, but the problem seems to be when a story has a module metadata decorator that has declarations:

decorators: [
    moduleMetadata({
       declarations: [MyComponent]
    })
  ]

The solution I found to this was to create a module that declares and exports this component.

@NgModule({
  declarations: [
    MyComponent
  ],
  exports: [
    MyComponent
  ]
})
export class MyModule
...
decorators: [
    moduleMetadata({
       declarations: [MyModule]
    })
  ]