Question

我正在使用Storybook版本：4.1.12和Angular 7.2.4。故事书已成功加载（我正在使用Angular 7），但在仪表板上显示以下消息： “很抱歉，您要么没有故事，要么没有被选中。” 我确实在src\stories下有故事。在index.stories.ts中输入垃圾时，我在仪表板中确实收到错误（这意味着该文件已由Storybook lib编译并读取）。我还尝试卸载并重新安装@angular\storybook。还是一无所有。

要复制

几乎完全按步骤配置故事书（使用角度7）： https://storybook.js.org/basics/guide-angular/

我还需要更改\node_modules\@storybook\angular\src\client\preview\index.d.ts 返回IAPI和IStoribookSection的值。

.storybook / config.js

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

// automatically import all files ending in *.stories.ts
const req = require.context('../src/stories', true, /.stories.ts$/);
function loadStories() {
    req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

.storybook / tsconfig.json

{
  "extends": "../tsconfig.json",
  "exclude": [
    "../src/test.ts",
    "../src/**/*.spec.ts",
    "../projects/**/*.spec.ts"
  ],
  "include": [
    "../src/**/*",
    "../projects/**/*"
  ]
}

src / stories / index.stories.ts

import {AppComponent} from '../app/app.component';
import {storiesOf} from '@storybook/angular/src/client/preview';
import {moduleMetadata} from '@storybook/angular';
import {ApiServiceMock} from './api.service.mock';
import {FormsModule} from '@angular/forms';

storiesOf('My Component', module)
    .addDecorator(
        moduleMetadata({
            imports: [FormsModule],
            providers: [ApiServiceMock]
        })
    )
    .add('hello world', () => ({
        component: AppComponent
    }));

Answer 1

上面的代码片段和我的配置之间的一个明显区别是，您似乎在'loadStories'函数中的'.storybook / config.js'中缺少了一个'require'：

import { configure } from '@storybook/angular';

const req = require.context('../src', true, /.stories.ts$/);

function loadStories() {
	require('../src/stories');
	req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

使用：

Storybook核心5.0.6
Angular 7.2.0

顺便说一句：这可能是未提出建议，但我发现将每个单独组件的一个“ XXXXXXX.stories.ts”文件与Presentational Components html，css和ts文件放在同一位置非常有益。

使用Angular 7时未显示任何故事

1 个答案: