如何将 storybook 集成到 antd angular(NG-ZORRO)

Question

I'm trying to integrate the storybook to my angular project which uses and design the library. Storyboook runs fine, but the antd style is not loading in stories. It shows only the default elements. I have googled many possibilities, there are little about and in angular. I know that we have somehow wrap the stories with antd library. Please show me the way. If we have an example already it will be great. Thanks in advance.

Answer 1

you need to add the ngzorro module into metadataModule of storybook. Here is example

export const MyComponentImpl = () => {
  return {
    moduleMetadata: {
      declarations: [MyComponent],
      imports: [
         BrowserModule,
         FormsModule,
         ReactiveFormsModule,
         BrowserAnimationsModule,
         NgZorroModule // the ngzorro modules that you want to use
     ]
    },
    template: `
        <div [ngStyle]="{'width': '100vw'}">

          <my-component></my-component>

        </div>
      `,
    props: {
    },
  };
};

Answer 2

When you use ng-zorro-antd in your projects, we would modify your angular.json to import styles file:

{
            "styles": [
              "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css",
              "src/styles.css"
            ],
}

So if you want to use ng-zorro-antd, you should import style files of the components you used in .story.js files. Such as node_modules/ng-zorro-antd/src/components/select/style/entry.less .

Hope this helps.