Angular Component Library w/ Storybook and Webpack

Ravi
Ravi
Nov 6 · 3 min read

Initially make sure you’ve ‘@angular/cli’ package and if you don’t, install it globally;

npm install -g @angular/cli

Now create a workspace for your library

ng new [libraryName] — create-application=false

We defined a parameter to our command called ‘–create-application’ and set it to ‘false’. This will give us a barebone Angular application structure without the application itself. This is the recommended way of creating an Angular workspace since Angular 7.

Disclaimer: [libraryName] all over the post refers to the name of your preference.

Now, let’s create a library project inside our brand new Angular workspace. So let’s enter the project’s directory, install dependencies and create a new library;

cd [libraryName] && npm install && ng generate library [libraryName]

And now let’s create a sample button component using the command below

ng generate component button — project=[libraryName]

Let’s add some basic HTML to the component

<button (class)=”class”> {{text}}</button>

Now add the ts code for the component

import { Component, OnInit, Input, Output, EventEmitter } from ‘@angular/core’;

@Component({

selector: ‘app-button’,

templateUrl: ‘./button.component.html’,

styleUrls: [‘./button.component.css’]

})

export class ButtonComponent implements OnInit {

@Input() text: string;

@Input() class: string;

constructor() { }

ngOnInit() { }

}

Now, we created a library and added a component in it. Let’s look at the difference between library and component before we proceed further.

“When you want to create an Angular library that has a component aspect in it, you are going to discover that you can’t -and not supposed to actually ‘serve’ your library and debug your components because the library is not an application that you can run. You have to have another application that has a reference to your library and use your library in there but this approach has its limits; You have to build the library and the application to see the results and it can become frustrating very easily, very fast. That’s why we are going to install StoryBook and create stories for each of our components and see them in action with hot-reload support.”

Let’s add Storybook to your workspace using the following command.

npx -p @storybook/cli sb init — type angular

After installation, make sure your tsconfig.json file comes with the following. Otherwise, replace the ‘extends’ with this

“extends”: “../projects/[libraryName]/tsconfig.lib.json”,

Before getting into Storybook, let’s talk about the main limitation that the storybook offers. This is specifically with ‘@storybook/angular’

“Storybook doesn’t load styles from the components.’

The workaround is defining a webpack configuration to be used from StoryBook. We will place the “webpack.config.js” file to the “.storybook” directory with the content below:

const path = require(‘path’);

const includePath = path.resolve(__dirname, ‘..’)

module.exports = {

module: {

rules: [

{

test: [/\.stories\.tsx?$/, /index\.ts$/],

loaders: [ { loader: require.resolve(‘@storybook/addon-storysource/loader’), options: { parser: ‘typescript’ }

}

],

include: [path.resolve(__dirname, ‘../src’)],

enforce: ‘pre’

},

{

test: /\.css$/,

include: includePath,

use: [‘to-string-loader’, ‘css-loader’]

}

]

}

};

Now, let’s install the loaders we’re using in the above config file.

npm install @storybook/addon-storysource — save-dev
npm install to-string-loader — save-dev
npm install css-loader — save-dev

Now remove all the ‘.stories.ts’ files inside ‘src/stories’ folder and add ‘index.stories.ts’ file with the following contents.

import { storiesOf } from ‘@storybook/angular’;

import { action } from ‘@storybook/addon-actions’;

import { ButtonComponent } from ‘../../projects/[libraryName]/src/lib/button/button.component’;

storiesOf(‘[libraryName], module).add(‘button’, () => ({

component: ButtonComponent,

props:{ text: “Save”, class: “primary}

})

);

Now run storybook using the following command

npm run storybook

Add styles to the button component in the library and you can see them on the storybook.

Now, go to the “http://localhost:6006” from your browser and find the button component populated in the storybook.

Comment below for any questions.

Written by

Ravi

Software Developer/Writer/Movie Buff/Traveler

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