1

我尝试在我的 Angular 项目中使用 Storybook，但遇到了一个神秘的错误消息，我对这里发生的事情一无所知。

这是我的tag.component.stories.ts文件：

import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { AppRoutingModule } from 'src/app/app-routing.module';
import { TagComponent } from './tag.component';

export default {
  title: 'Attached Tags',
  component: TagComponent,
  decorators: [
    moduleMetadata({
      declarations: [TagComponent],
      imports: [BrowserModule, CommonModule, RouterModule, AppRoutingModule]
    })
  ]
} as Meta;

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

export const GreenPost = Template.bind({});
GreenPost.args = {
  tag: {
    id: 1,
    name: 'Test tag',
    color: '#bada55',
    type: 'Post'
  }
};

我收到此错误消息：

Couldn't find story matching 'attached-tags--green-post'.
- Are you sure a story with that id exists?
- Please check your stories field of your main.js config.
- Also check the browser console and terminal for error messages.

所以，我很确定在阅读了文档的“简单组件”部分后，我不知道应该如何或在哪里为故事定义任何 id。

这是我的.storybook/main.js：

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/angular",
  "core": {
    "builder": "webpack5"
  }
}

这是我认为的出厂默认设置。

还检查了浏览器控制台，没有别的，只是两次可见消息。

知道如何解决这个问题吗？

4

0 回答 0