How to import NgbCalendar in Storybook?

Question

I built Angular component that uses ngbDatepicker. The component (named DatepickerComponent) imports following classes:

import { NgbDateStruct, NgbCalendar, NgbDatepickerI18n, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';

I want to display the component in Storybook by creating story datepicker.stories.ts:

import { withPreview, previewTemplate, DEFAULT_ANGULAR_CODESANDBOX } from 'storybook-addon-preview';
import { moduleMetadata } from '@storybook/angular';
import { DatepickerComponent } from 'src/app/datepicker/datepicker.component';
import { NgbModule, NgbCalendar } from '@ng-bootstrap/ng-bootstrap';

export default {
  title: 'Datepicker',
  decorators: [
    moduleMetadata({
      declarations: [DatepickerComponent],
      imports: [NgbModule, NgbCalendar]
    }),
    withPreview
  ]
};

export const Datepicker = () => ({
  component: DatepickerComponent
});
Datepicker.story = { name: 'Datepicker' };

When I run storybook, I get this error message:

Unexpected value 'NgbCalendar' imported by the module 'DynamicModule'. Please add a @NgModule annotation.

How should I correctly import NgbCalendar?

Answer 1

The same providers, that are defined in @Component, have to be in moduleMetadata in story as well:

export default {
  title: 'Datepicker',
  decorators: [
    moduleMetadata({
      declarations: [
        DatepickerComponent
      ],
      imports: [NgbModule],
      providers: [
        I18n,
        { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n },
        { provide: NgbDateParserFormatter, useClass: CustomNgbDateParserFormatter }
      ]
    })
  ]
};