5
votes

Le composant Angular Storybook fait partie d'une erreur de deux modules

Je teste l'interface utilisateur sur certains composants partagés avec Storybook et je rencontre un bogue où il semble que Storybook charge le composant dans DynamicModule, ce qui entraîne l'erreur suivante:

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: ')
    }
  }));

Le composant DigFinder n'est définitivement déclaré que dans son module:

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 { }

Les tests unitaires sont tous réussis, mais cette erreur survient lors de son rendu par storybook:

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.

typescript angular storybook

0 commentaires

3 Réponses :

0
votes

Devrait-il importer:

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

À la place, importer à partir du module?

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

1 commentaires

Le module exporte le composant à importer dans d'autres modules, mais vous devez toujours importer l'instance de classe de composant afin de la référencer dans votre code.

3
votes

J'ai pu résoudre ce problème en important explicitement toutes les exigences, plutôt que d'importer le module:

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: ')
    }
  }));

Mais j'aimerais toujours comprendre pourquoi l'importation du module ne fonctionne pas (cela fonctionne sur plusieurs autres exemples).

0 commentaires

6
votes

Cela se produit parce que vous utilisez l'accessoire component dans la méthode Storybook add . Je crois que c'est ainsi que cela se termine dans DynamicModule, puis l'importation de moduleMetadata l'obtient de la deuxième manière.

Une solution est de faire ce que vous avez répondu: sauter l'importation du module et déclarer / importer les bits du module dont vous avez besoin. L'alternative est d'utiliser le prop template au lieu du prop 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,
    }
  }));

Notez que vous avez toujours besoin de accessoires ici.

0 commentaires