

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.
