不同目录中的 Angular 组件

Question

我正在编写故事书，需要包含多个组件以使用 compodoc 生成文档，但我发现在编写故事时，该组件必须与故事本身位于同一目录中。如果我从不同的文件夹引用组件，则不会生成任何参数/文档。

是否可以将组件放置在与故事不同的文件夹中？

注意：我使用的是 Angular 版本 16.1.4，Storybook 版本 7.3.2

当前文件夹结构

- Src
  -- Lib
     --- It has multiple component files with documentation (eg:button.component.ts).
  -- Stories
     --- All the storybook files (eg:button.stories.ts).

故事.ts

import { Meta, StoryFn } from '@storybook/angular';

import { AccordionComponent } from './accordion.component';
import { code } from './accordion-example';

export default {
    title: 'Core UI/Accordion/Single Tier Group',
    component: AccordionComponent,
  } as Meta;
  
export const SingleTierGroup: StoryFn = (args) => ({
    props: args,
});

SingleTierGroup.parameters = {
    docs: {
        source: {
            code,
            language: 'jsx',
            type: 'auto',
        },
    },
};

main.ts 文件

import { StorybookConfig } from '@storybook/angular';

const config: StorybookConfig = {
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/addon-interactions',
        'storybook-zeplin/register'
    ],
    features: {
        storyStoreV7: true
    },
    framework: {
        name: '@storybook/angular',
        options: {}
    },
    stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
    docs: {
        autodocs: true
    }
};

export default config;

tsconfig.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "rootDir": "..",
    "paths": {
        "core-ui": ["../src/lib/components"],
        "core-ui/charts": ["../src/lib/charts"],
        "core-ui/mini": ["../src/lib/mini"],
        "core-ui/a11y": ["../src/lib/a11y"],
        "core-ui/data-viz": ["../src/lib/data-viz"],
        "core-ui/illustrations": ["../src/lib/illustrations"],
        "core-ui/logos": ["../src/lib/logos"],
    },
    "types": [
      "node"
    ],
  },
  "include": [
    "../src/lib/**/*",
    "../src/stories/**/*"
  ],
  "exclude": [
    "../automation",
    "../src/docs",
    "../src/schematics",
    "../src/**/*.spec.ts",
    "../tools",
  ],
  "files": [
    "./main.ts",
    "./manager.ts",
    "./preview.ts",
    "./themes.ts",
    "./typings.d.ts"
  ]
}

preview.ts 文件

import { HttpClientModule } from '@angular/common/http';
import { importProvidersFrom } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { applicationConfig, moduleMetadata, Preview } from '@storybook/angular';

import { CoreUIModule } from '../src/lib';
import { StorybookModule } from '../src/stories/storybook.module';
import { backgrounds } from './themes';
import { setCompodocJson } from "@storybook/addon-docs/angular";
import docJson from "../dist-docs/documentation.json";


setCompodocJson(docJson);

const preview: Preview = {
    decorators: [
        moduleMetadata({
            imports: [StorybookModule]
        }),
        applicationConfig({
            providers: [
                importProvidersFrom(
                    BrowserAnimationsModule,
                    CoreUIModule,
                    HttpClientModule,
                    StorybookModule
                )
            ]
        })
    ],
    parameters: {
        actions: {
            argTypesRegex: '^on[A-Z].*'
        },
        backgrounds,
        controls: {
            expanded: true, // set true to make the controls tab description visible 
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/
            }
        },
        docs: {
            canvas: {
                sourceState: 'shown'
            },
            story: {
                inline: true
            }
        },
        options: {
            storySort: {
                method: 'alphabetical'
            }
        },
        zeplinLink: 'https://app.zeplin.io/project/5efc933d856ca782003a74dd'
    }
};

export default preview;

我尝试使用 addDecoratores({}) 但它给出错误，说组件是在两个模块中定义的（应用程序和故事书模块）

Answer 1

您是否尝试过更改 tsconfig.json 文件以引用该目录？