Storybook 4 & Angular 6

Adriel Zárate
Sep 1, 2018 · 2 min read

Este “tutorial” lo hago en base a mi experiencia tratando de instalar Angular 6 con Storybook, según como se muestra en su sitio oficial y en la cuenta de Github, cuyas guías no me funcionaron. Vi muchas respuestas vagas por web, y haciendo una mezcla de todas logré correr la aplicación. Quizás en unos días esto deje de ser útil, pero de todas maneras comparto los pasos para lograrlo, por si a alguien le sirve.

Instalamos el CLI de Storybook

npm i -g @storybook/cli

Luego, nos dirigimos a la raíz de nuestro proyecto en Angular v6 e instalamos la ultima versión de Storybook for Angular junto al paquete babel-core.

npm i @storybook/angular@4.0.0-alpha.20 babel-loader@^7.0.0

Cuando la instalación termine, agregamos este comando a nuestro package.json

{ 
“scripts”: {
“storybook”: “start-storybook -p 9001 -c .storybook”
}
}

En la raíz del proyecto (junto a src y node_modules) creamos una carpeta de nombre .storybook, y dentro un archivo config.js. Coloca las siguientes lineas en él.

import { configure } from '@storybook/angular';function loadStories() {
require('../src/stories/index.ts');
}
configure(loadStories, module);

Y ahora creamos nuestro archivo de “historias” en src/stories/index.ts.

import { storiesOf } from '@storybook/angular';
import { StoryOneComponent } from '../app/story-one/story-one.component';
storiesOf('Story One Component', module)
.add('with title', () => ({
component: StoryOneComponent,
props: {
sStoryOneTitle: 'Hello from Storybook'
},
}));

El componente StoryOneComponent que nombro arriba es el siguiente:

// story-one.component.tsimport { Component, Input } from '@angular/core';@Component({
selector: 'app-story-one',
templateUrl: './story-one.component.html',
styleUrls: ['./story-one.component.css']
})
export class StoryOneComponent {
@Input('sStoryOneTitle') sStoryOneTitle;
constructor() { }
}
// story-one.component.html<p>{{sStoryOneTitle}}</p>

Por último, en src/tsconfig.app.json agregamos “stories” a la configuración.

"exclude": [
"test.ts",
"**/*.spec.ts",
"stories"
]

Liso! Ya podemos correr Storybook en una terminal sin ningún error.

npm run storybook

Si alguien tiene un método mejor (el comando getstorybook que en teoría realiza todo lo anterior automágicamente me daba errores con la versión de Webpack de mi Angular CLI), por favor me lo comenta!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade