2.0.0 • Public • Published

Schematics to easily add Storybook support to your Angular projects

npm version Build Status Coverage Status dependency Status devDependency Status


  • Project built with Angular CLI v6+ (tested with CLI v6.1.3, Angular v6.1.2)


Install globally

npm install -g ngx-storybook-schematics

Optionally run as one command in an Angular CLI app directory. Note this will add the schematic as a dependency to your project.

ng add ngx-storybook-schematics


This collection is currently composed of the following schematics:

storybook schematic

This is the main schematic of the collection, must be run first to create every files and dependencies needed to add Storybook support to your CLI project.

Inside an Angular CLI project run:

ng g ngx-storybook-schematics:storybook

This schematic will:

  • install Storybook, its dependencies, and scripts
  • add necessary files for Storybook to work with Angular


You can now launch the Storybook by:

npm run storybook

Now hit http://localhost:9001/ in your browser, to see your components in action.

You can also provide the given options when running the schematic:

option description
skipInstall (boolean, default: false) Skip automatic installation of Storybook dependency packages
excludeStoriesFromAppCompilation (boolean, default: false) (Troobleshooting) Exclude your stories from being compiled when running your angular dev environment

addon schematic

Once you've created the storybook with the storybook schematic, you can add core or community addons using the latter schematic.

Inside an Angular CLI project run:

ng g ngx-storybook-schematics:addon --packageName=<name> [--core]

This schematic will:

  • install necessary dependencies for the addon to work
  • create and register the addon in the addons.js file


option description
packageName (string) The name of the addon package to add. For 'core' addons (i.e --core=true), you can omit the @storybook/addons- prefix
core (boolean, default: false) Specifies whether or not it is a core addon
skipInstall (boolean, default: false) Skip automatic installation of addon dependency packages


These feature schematics are coming (very) soon into the collection:

  • add a schematic to automatically scan and add app component(s) to the Storybook
  • add a schematic to support addons


Copyright (c) 2018 Tine Kondo. Licensed under the MIT License (MIT)

Package Sidebar


npm i ngx-storybook-schematics

Weekly Downloads






Unpacked Size

110 kB

Total Files


Last publish


  • tinesoft