Let’s say it guys, Angular is one of the best JS framework out there! You are probably and justifiably using it right now to write your web applications and/or the ones to come (if not 😱, you should really consider it).

The community behind is very strong too, a ton of libraries are available for you to add in order to extend your applications (ng-bootstrap, angular material, angular firebase,…).

You may even be thinking about writing your very own, either from scratch, or by extracting a shared module you’ve created as part of that big application you’ve been working on.

In both case, you quickly discover that the process of releasing an Angular library the right way, is not that simple. There is so many things to think of, like:

Inlining the external styles and templates in your components

Writing and compiling your library so that it is compatible for Ahead Of Time (AOT) compilation

Distributing a package as as small as possible, to reduce its footprint for final consumers

Distributing a package that plays well with TypeScript by allowing auto-completion and compile-time type checking

Bundling your library to allow most users to consume it via SystemJS or Webpack

And the list goes on.

Maybe you’ve already done all that for that one library you published last month. But now, you are working on a new awesome library to release. Though it is totally different from the previous one, still, the building/testing chain around is EXACTLY the same, or very very close. And you are tired of copying/renaming the files over and over again, from one project to the other.

This is what led to the creation of generator-ngx-library!

What is it?

generator-ngx-library is a Yeoman generator that aims to ease the painful/cumbersome process of creating and releasing an Angular library, so that you can really focus on the most important: writing the actual library!

Beyond generating the minimum code to get you started quickly, it provides you with a full build and testing setup ready-to-use, along with integration with popular tools to improve your workflow, code quality and maintenance.

Features

These are some of the main features covered by the generator:

Ahead Of Time (AOT) Compilation, Flattened ES Modules (FESM), [Minified] UMD Bundles , Closure Compiler support (follows Angular Package Format)

(AOT) Compilation, (FESM), , support (follows Angular Package Format) Code Linting based on codelyzer rules

based on codelyzer rules Styles and Templates Inlining in components

and in components SASS/SCSS to CSS compilation

to compilation Integrated demo app built with angular-cli and ng-bootstrap

built with angular-cli and ng-bootstrap Project Documentation built with compodoc and published along with demo app 📚

built with compodoc and published along with demo app 📚 Continuous Integration with Travis CI

with Travis CI Testing Environment with Karma and Webpack

with Karma and Webpack Code Coverage with Coveralls.io

with Coveralls.io Real-time Monitoring and Automatic Updates of npm dependencies with Greenkeeper 🌴

and with Greenkeeper 🌴 Publication to npm registry

to npm registry Releasing to Github

You see? the tool really takes care of everything for you!

How to install ?

Make sure you have installed the prerequisites first (Yeoman Yo, Gulp CLI and Angular CLI):

$ npm install -g yo gulp-cli @angular/cli // or via Yarn $ yarn add global yo gulp-cli @angular/cli

Then, simply install the generator:

$ npm install -g generator-ngx-library // or via Yarn $ yarn add global generator-ngx-library

How to create your library ?

Very simple. Create the root folder of your library, move into it and run:

yo ngx-library

Answer the questions you are prompted to:

generator-ngx-library prompt

This will generate a fully git-ready project containing your library, and based on the exact options and answers you provided during the initialization.