CODEWITHSUNDEEP
angularstorybook
ohadinho
ohadinho

Reputation: 7144

No stories are shown when using Angular 7

I'm using Storybook Version: 4.1.12 and Angular 7.2.4. Storybook is loaded successfully (I'm using Angular 7) but in dashboard this message is displayed: "Sorry, but you either have no stories or none are selected somehow.". I DO have stories under src\stories. When typing garbage in index.stories.ts I DO get an error in dashboard (that means the file is compiled and read by storybook lib). I've also tried to uninstall & reinstall @angular\storybook. Still nothing.

To Reproduce

Configure storybook almost exactly step by step (use angular 7): https://storybook.js.org/basics/guide-angular/

I also needed to change \node_modules\@storybook\angular\src\client\preview\index.d.ts return values of IAPI and IStoribookSection to any.

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

Upvotes: 0

Views: 780

Answers (1)

Benjamin Fritz
Benjamin Fritz

Reputation: 31

One visible difference between the snippets above and my config is that you seem to be missing one 'require' in your '.storybook/config.js' inside the 'loadStories' function:

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

Using:

  • Storybook core 5.0.6
  • Angular 7.2.0

BTW: This may be unasked advice but i found it hugely beneficial to put one 'XXXXXXX.stories.ts' file for each individual component into the same place as the Presentational Components html, css and ts files

Upvotes: 1

Related Questions