CODEWITHSUNDEEP
angulartypescriptstorybook
Optiq
Optiq

Reputation: 3182

Child components in Angular not recognized in Storybook while working perfectly fine with ng serve

I'm building some components in Angular using Storybook which so far has been working. I just came to a component where I nest another component inside of it and it's not iterating in Storybook. When I look in the console I see an error telling me to make sure the child component is added to the module because it doesn't recognize it. I scratched my head for some time about this checking my code and couldn't find the problem. I decided to run ng serve and go to localhost://4200 to see what happens and everything works as expected without the error. I looked over the documentation at Storybook's site and I don't see anything exhibiting a special way to handle components with child components so I don't understand what's happening. Here's some of my code,

Child Component's Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BoxSizeVisualizerComponent } from './box-size-visualizer.component';



@NgModule({
  declarations: [BoxSizeVisualizerComponent],
  imports: [
    CommonModule
  ],
  exports:[CommonModule, BoxSizeVisualizerComponent],
  bootstrap:[BoxSizeVisualizerComponent]
})
export class BoxSizeVisualizerModule { }

Parent Component's Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BoxSizeFrameComponent } from './box-size-frame.component';
import { BoxSizeVisualizerModule } from '../box-size-visualizer/box-size-visualizer.module';



@NgModule({
  declarations: [ BoxSizeFrameComponent],
  imports: [
    CommonModule,
    BoxSizeVisualizerModule
  ],
  exports:[CommonModule, BoxSizeVisualizerModule, BoxSizeFrameComponent],
  bootstrap:[BoxSizeFrameComponent]
})
export class BoxSizeFrameModule { }

The Story File

import { Meta, Story } from "@storybook/angular/types-6-0";
import { boxSizeParams, boxSizeSize } from "../box-size-visualizer/box-size-visualizer.component";
import { BoxSizeFrameComponent } from "./box-size-frame.component";


export default{
    title: 'Demo Frames/Box Size Frame',
    component: BoxSizeFrameComponent
} as Meta;

const Sizes: boxSizeParams[] = [*/a bunch of objects/*]

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

export const Primary = Template.bind({});

Primary.args = ({Sizes:Sizes});

As I said before I'm not having any problems with using ng serve so I'm just putting some code here for the sake of following standard so if you need to see something else let me know and I'll add it. Does anyone know what the problem is?

Upvotes: 2

Views: 2130

Answers (1)

Optiq
Optiq

Reputation: 3182

ok something told me to look through the Storybook example components and I saw in the Header that they use the Button component. In the Header's story I saw they defined a decorators array in their default export like this

export default {
  title: 'Example/Header',
  component: Header,
  decorators: [
    moduleMetadata({
      declarations: [Button],
      imports: [CommonModule],
    }),
  ],
} as Meta;

So I modified my code to this

export default{
    title: 'Demo Frames/Box Size Frame',
    component: BoxSizeFrameComponent,
    decorators: [
        moduleMetadata({
            imports:[CommonModule, BoxSizeVisualizerModule]
        })
    ]
} as Meta;

Everything works now :)

Upvotes: 3

Related Questions