Create an Angular Component Library w/ StoryBook

Today, we are going to create an Angular library that has a couple of components in it. Then we are going to install and configure StoryBook to see our components in action and make the development phase a little bit bearable.

I’m going to assume that you have node.js and npm package manager installed. If not, you can download node.js from here.

Create An Angular Workspace And Library

First, let’s make sure you have the “@angular/cli” package and if you don’t, install it globally;
npm install -g @angular/cli
Then we will create a workspace for our library;
ng new my-lib --create-application=false
The “my-lib” part will be your library name. We also 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.

Then, we will 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 my-lib
npm install
ng generate library my-lib --prefix=my

And then we are going to create a component with the command below;
ng generate component button --project=my-lib
Let’s make the component does what it says in the name;

Alright, we created a library and added a component in it. Let’s look at how it goes, but wait…

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.

Adding StoryBook To Your Workspace

We are going to initialize the StoryBook with the “sb init” command. To do this normally, we would have to install “@storybook/cli” package but since I’m going to use this occasionally, I decided to run this command using npx. You can install StoryBook CLI globally if you want to.
npx -p @storybook/cli sb init --type angular
After the installation, you’re going to have to make some changes to the tsconfig.json file in the recently created “.storybook” directory. You can find it in the root of your workspace. Replace the “extends” line with the line below, changing the “my-lib” with your project name;
"extends": "../projects/my-lib/tsconfig.lib.json",
After that, we are going to define a webpack configuration to be used from StoryBook because for some reason, it does not load the styles from the components. We will place the “webpack.config.js” file to the “.storybook” directory with the content below;

Of course, we also have to install the necessary loaders;

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

And for the last step, remove all of the contents of the “src/stories/index.stories.ts” file with the contents below;

Change the “my-lib” part to be the project name of yours, run the command below and voila!
npm run storybook

Go to the “http://localhost:6006” address from your favorite web browser and see your button component right on the page.

Create an Angular Component Library w/ StoryBook

That’s all of it. After that, you can start to develop your awesome component library.

If you have any questions, comment below and see you in the next one.


See my other articles : Cloud Wars : AWS vs Azure on Serverless

How to Setup Angular 6 Envıronment on Wındows

Hi everyone! In this article we will learn “How to setup Angular 6 Environment on Windows”!

We all know that Angular 6 is one of the best framework for developing  Single Page Applications. So how do we setup the Angular 6 environment in Windows? Let’s make it together!

  • Download & Install Node JS on your PC
  • Install Angular CLI globally
  • Choose the best text editor for you

Step 1: Download & Install Node JS on your PC

Open your browser and navigate to:  than Download the current version of Node JS.




If you want to make sure that you have successfully installed the Node JS;

Open your command prompt and type “node -v”. If you see the node version as below, the installation is ok!



Step 2: Install Angular CLI globally

Angular CLI is a command line interface for Angular. To install the Angular CLI;

Open your command prompt, and type “npm install -g @angular/cli



If you want to make sure that you have successfully installed the Angular CLI;

Open your command prompt and type “ng -v”. If you see the cli version as below, the installation is ok!


Step 3: Choose the best text edıtor for you

With any text editor you can develop the Angular project. But one of them is definitely better: Visual Studio Code!



With a lot of plug-in support, you can develop Angular 6 projects much faster and more convenient with Visual Studio Code! In another article, I’ll talk about the best Visual Studio Code plug-ins. Stay on track!

You can download Visual Studio Code from

Now you can create your first Angular 6 project! Open your command prompt type “ng new my-first-project”!