Angular Storybook Component является частью ошибки двух модулей

Question

Я тестирую пользовательский интерфейс на некоторых общих компонентах с помощью Storybook и сталкиваюсь с ошибкой, из-за которой Storybook загружает компонент в DynamicModule, что приводит к следующей ошибке:

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

Компонент DigFinder определенно объявлен только в своем модуле:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DigFinderComponent } from './components/dig-finder/dig-finder.component';
import { DigFinderPanelComponent } from './components/dig-finder-panel/dig-finder-panel.component';
import { DigFinderNodeComponent } from './components/dig-finder-node/dig-finder-node.component';
import {DigUiModule} from '../dig-ui/dig-ui.module';
import {DigCardModule} from '../dig-card/dig-card.module';
import {DigContainerModule} from '../dig-container/dig-container.module';
import {DigBreadcrumbsModule} from '../dig-breadcrumbs/dig-breadcrumbs.module';
import {RouterModule} from '@angular/router';

@NgModule({
  declarations: [DigFinderComponent, DigFinderPanelComponent, DigFinderNodeComponent],
  imports: [
    CommonModule,
    DigBreadcrumbsModule,
    DigCardModule,
    DigContainerModule,
    DigUiModule,
    RouterModule
  ],
  exports: [
    DigFinderComponent
  ]
})
export class DigFinderModule { }

Все модульные тесты проходят, но эта ошибка появляется, когда ее отображает сборник рассказов:

import {moduleMetadata, storiesOf} from '@storybook/angular';

import {withNotes} from '@storybook/addon-notes';
import {action} from '@storybook/addon-actions';
import {DigFinderModule} from '../../../src/modules/dig/dig-finder/dig-finder.module';
import {DigFinderComponent} from '../../../src/modules/dig/dig-finder/components/dig-finder/dig-finder.component';

const testData = [
  '/about',
  '/about/team',
  '/about/services',
]
storiesOf('DigFinder', module)
  .addDecorator(
    moduleMetadata({
      imports: [
        DigFinderModule,
      ]
    })
  )
  .add('Default', () => ({
    component: DigFinderComponent,
    props: {
      data: testData,
      select: action('Selected: ')
    }
  }));

Answer 1

Мне удалось решить эту проблему путем явного импорта всех требований, а не импорта модуля:

storiesOf('DigFinder', module)
  .addDecorator(
    moduleMetadata({
      declarations: [DigFinderComponent, DigFinderPanelComponent, DigFinderNodeComponent],
      imports: [
        CommonModule,
        DigBreadcrumbsModule,
        DigCardModule,
        DigContainerModule,
        DigUiModule,
        RouterModule
      ],
    })
  )
  .add('Default', () => ({
    component: DigFinderComponent,
    props: {
      data: testData,
      select: action('Selected: ')
    }
  }));

Но все же хотелось бы выяснить, почему импорт модуля не работает (он работает на несколькихдругие примеры).

Answer 2

Это происходит потому, что вы используете опору component в методе Storybook add.Я полагаю, что именно так все и заканчивается в DynamicModule, а затем импорт moduleMetadata получает его вторым способом.

Одно из решений - сделать то, что вы ответили: пропустить импорт модуля и объявить / импортировать биты модуля, которыетебе нужно.Альтернатива состоит в том, чтобы использовать template опору вместо component опоры:

import {moduleMetadata, storiesOf} from '@storybook/angular';

import {withNotes} from '@storybook/addon-notes';
import {action} from '@storybook/addon-actions';
import {DigFinderModule} from '../../../src/modules/dig/dig-finder/dig-finder.module';
import {DigFinderComponent} from '../../../src/modules/dig/dig-finder/components/dig-finder/dig-finder.component';

const testData = [
  '/about',
  '/about/team',
  '/about/services',
]
storiesOf('DigFinder', module)
  .addDecorator(
    moduleMetadata({
      imports: [
        DigFinderModule,
      ]
    })
  )
  .add('Default', () => ({
    template: `
      <app-dig-finder
        [data]="data"
      ></app-dig-finder>
    `,
    props: {
      data: testData,
    }
  }));

Обратите внимание, что вам все еще нужно props здесь.

Answer 3

Должен ли этот импорт:

import {DigFinderComponent} from '../../../src/modules/dig/dig-finder/components/dig-finder/dig-finder.component';

Импортировать из модуля вместо?

import {DigFinderComponent} from '../../../src/modules/dig/dig-finder/dig-finder.module';