Use Storybook with Angular

Using Storybook to manage component design is quite simple.

1. First, navigate to your project's root directory and run:

npx storybook init

This will spin up a Storybook project in the current working directory.

2. Update your project's angular.json file with the following:

{
  "storybook": {
    "builder": "@storybook/angular:start-storybook",
    "options": {
      "browserTarget": "angular-cli:build",
      "port": 6006
    }
  },
  "build-storybook": {
    "builder": "@storybook/angular:build-storybook",
    "options": {
      "browserTarget": "angular-cli:build"
    }
  }
}

3. Next, run:

npm run storybook

Once the server has fully started up, navigate to localhost:6006.

Now you can begin to create stories for your Angular components:

import { BrowserModule } from '@angular/platform-browser';

import { HeaderComponent } from "./header.component";

import { moduleMetadata } from '@storybook/angular';

export default {
    title: 'Header',
    decorators: [
        moduleMetadata({
            declarations: [
                HeaderComponent
            ],
            imports: [ 
                BrowserModule
            ]
        }),
    ],
};
export const Main = () => ({
    template: `
        <app-header></app-header>
    `
});

Note: If you run in to an error such as "System Limit for Number of File Watchers", follow the steps below:

sudo nano /etc/sysctl.conf

Add the following line at the bottom:

fs.inotify.max_user_watches=524288

And then save & exit.

Sources

• System Limit for Number of File Watchers