How to use relative angular component in Storybook?

Question

Consider this structure; --MyModule ----Header ----HeaderLogo

I'm trying to develop angular components in storybook. I am able to see and develop a single component, but when I import component into another component (header logo into header) (same module) I'm getting the following error;

Template parse errors: 'header-logo' is not a known element: 1. If 'header-logo' is an Angular component, then verify that it is part of this module. 2. If 'header-logo' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

When I add parent module to moduleMetadata like this (to import HeaderLogo),

addDecorator(
  moduleMetadata({
    imports: [MyModule],
  })
);

I'm getting;

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

How can I make this work?

Every component can be part of only one module. If you want to use it in more modules then you need to create a new module which will declare and export that component and then you can import that module to more modules. — joka00, Mar 01 '19 at 23:33
It's only defined under one module, I believe storybook is dynamically generating another module and declaring it. — Mohamed, Mar 01 '19 at 23:55

score 2 · Answer 1 · answered Apr 11 '19 at 15:05

'moduleMetadata' also has another property 'declarations'. You can use that to add the component you desire. That seems to be the best way to add components from inside the same module as the component you are documenting.

Example (for an Angular context):

Assuming the 'HeaderComponent' and the 'HeaderLogoComponent' come from the same module.

/** List of module dependencies and component declarations. Stored as separate var because they are shared among all stories */
const modules = {
 imports: [MatIconModule, BrowserAnimationsModule],
 declarations: [HeaderLogoComponent]
};

/** Prepared actions to make sure they are consistently available throughout the story set */
const actions = {
 doTheThing: action('Do it')
};

storiesOf('UI|Headers/Main Header', module)
 .addDecorator(withA11y)
 .addDecorator(withKnobs)
 .add('with Logo and stuff',
  () => ({
   component: HeaderComponent,
   props: {
    formLabel: text('formLabel', undefined),
    primaryColor: '#FFFFFF',
    doThings: actions.doTheThing
   },
   moduleMetadata: modules
  }));

score 0 · Answer 2 · answered May 24 '22 at 13:17

The syntax for adding Component Library Declorations for Storybook 6.5.3 is:

// stories/Example.stories.ts
import { Story, Meta, moduleMetadata } from '@storybook/angular';
import {
  MainComponent,
  MainModule,
  PrimaryContentComponent,
  SecondaryContentComponent,
} from 'my-library';

export default {
  title: 'MainComponent',
  component: MainComponent,
  declarations: [/** If you add additional components to this template add them here */],
  decorators: [
    moduleMetadata({
      imports: [MainModule],
      declarations: [
        /** Add declorations from your component library here */
        PrimaryContentComponent,
        SecondaryContentComponent,  
      ],
    }),
  ],
} as Meta;

How to use relative angular component in Storybook?

2 Answers2