При использовании Angular 7 истории не отображаются.

Question

Я использую версию Storybook: 4.1.12 и Angular 7.2.4.Сборник рассказов успешно загружен (я использую Angular 7), но на панели мониторинга отображается это сообщение: «Извините, но у вас либо нет рассказов, либо ни одна не выбрана каким-либо образом».У меня действительно есть истории под src\stories.При вводе мусора в index.stories.ts я действительно получаю сообщение об ошибке в панели управления (это означает, что файл компилируется и читается в сборнике рассказов).Я также пытался удалить и переустановить @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

Одно видимое отличие между фрагментами кода выше и моим конфигом состоит в том, что вы, по-видимому, пропускаете один файл 'require' в вашем файле .storybook / config.js внутри функции loadStories:

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);

Использование:

• Ядро сборника рассказов 5.0.6
• Угловое 7.2.0

КСТАТИ: Это может быть незапрошенный совет, но я нашел чрезвычайно полезным поместить один файл 'XXXXXXX.stories.ts' для каждого отдельного компонента в то же место, что и html, css и ts файлы Presentational Components