Type ...Component is part of the declarations of 2 modules: AppModule and StorybookModule

[Justicesoul]

Describe the bug

I'm trying to create story with combined component, but got this error:

"Type H1HeadingComponent is part of the declarations of 2 modules: AppModule and StorybookModule! Please consider moving H1HeadingComponent to a higher module that imports AppModule and StorybookModule. You can also create a new NgModule that exports and includes H1HeadingComponent then import that NgModule in AppModule and StorybookModule."

I do not have any other modules, except AppModule.

To Reproduce

I'm using Angular14 and get this error, trying with any angular version choice:

npx -p @angular/cli@13.1.x ng new angular14 --routing=true --minimal=true --style=scss --skipInstall=true --strict Error: This command is not available when running the Angular CLI inside a workspace. An error occurred while executing: npx -p @angular/cli@13.1.x ng new angular14 --routing=true --minimal=true --style=scss --skipInstall=true --strict 🚨 Bootstrapping angular13 failed 🚨 Failed to create repro Error: Error: command exited with code: 1: at repro (/Users/jurijsbelozjorovs/.npm/_npx/eebb2d3a7d26a7f1/node_modules/@storybook/cli/dist/cjs/repro.js:172:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

System

System:
OS: macOS 12.6
CPU: (10) arm64 Apple M1 Pro
Binaries:
Node: 18.7.0 - ~/.nvm/versions/node/v18.7.0/bin/node
npm: 8.15.0 - ~/.nvm/versions/node/v18.7.0/bin/npm
Browsers:
Chrome: 105.0.5195.125
Firefox: 105.0.1
Safari: 15.6.1
npmPackages:
@storybook/addon-actions: ^6.5.12 => 6.5.12
@storybook/addon-essentials: ^6.5.12 => 6.5.12
@storybook/addon-interactions: ^6.5.12 => 6.5.12
@storybook/addon-links: ^6.5.12 => 6.5.12
@storybook/angular: ^6.5.12 => 6.5.12
@storybook/builder-webpack5: ^6.5.12 => 6.5.12
@storybook/manager-webpack5: ^6.5.12 => 6.5.12
@storybook/testing-library: ^0.0.13 => 0.0.13

Additional context

...story.ts

import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { AppModule } from "src/app/app.module";
import { DelimiterComponent } from "src/app/components/common-parts/delimiter/delimiter.component";
import { H1HeadingComponent } from "src/app/components/common-parts/headings/h1-heading/h1-heading.component";
import { H2HeadingComponent } from "src/app/components/common-parts/headings/h2-heading/h2-heading.component";
import { TitleSubtitleComponent } from "src/app/components/complex-parts/title-subtitle/title-subtitle.component";

export default {
  title: "Delimiter",
  component: TitleSubtitleComponent,
  decorators: [
    moduleMetadata({
      declarations: [
        H1HeadingComponent,
        H2HeadingComponent,
        DelimiterComponent,
      ],
      imports: [AppModule],
    }),
  ],
} as Meta;

const Template: Story<TitleSubtitleComponent> = (
  args: TitleSubtitleComponent
) => ({
  props: args,
});

export const HelloWorld = Template.bind({});
HelloWorld.args = {
  title: "Hello",
  subtitle: "World",
};

app.module.ts

import { NgModule, Injector, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { createCustomElement } from "@angular/elements";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { H1HeadingComponent } from "./components/common-parts/headings/h1-heading/h1-heading.component";
import { H2HeadingComponent } from "./components/common-parts/headings/h2-heading/h2-heading.component";
import { H3HeadingComponent } from "./components/common-parts/headings/h3-heading/h3-heading.component";
import { SectionContentComponent } from "./components/common-parts/section-content/section-content.component";
import { TitleSubtitleComponent } from "./components/complex-parts/title-subtitle/title-subtitle.component";
import { DelimiterComponent } from "./components/common-parts/delimiter/delimiter.component";

const customComponents = {
  "h1-heading": H1HeadingComponent,
  "h2-heading": H2HeadingComponent,
  "h3-heading": H3HeadingComponent,
  "section-content": SectionContentComponent,
  "title-subtitle": TitleSubtitleComponent,
  "delimiter-svg": DelimiterComponent,
};

@NgModule({
  declarations: [
    AppComponent,
    H1HeadingComponent,
    H2HeadingComponent,
    H3HeadingComponent,
    SectionContentComponent,
    TitleSubtitleComponent,
    DelimiterComponent,
  ],
  imports: [BrowserModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  entryComponents: [AppComponent],
  bootstrap: [],
  providers: [],
})
export class AppModule {
  constructor(injector: Injector) {
    for (const [tagName, component] of Object.entries(customComponents)) {
      customElements.define(
        tagName,
        createCustomElement(component, { injector })
      );
    }
  }
  ngDoBootstrap() {}
}

[d2FuZ3h1ZG9uZw]

Is there any solution? I have tried all the issues about this issue!

[shilman]

Ermahgerd!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.30 containing PR #20559 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.