generator-angular2-library

Yeoman generator to create a standalone Angular 2 library in seconds.

If you want to create an Angular 2 library with directives, services and/or pipes, then this generator is just what you need.

The generator:

• creates and configures package.json
• creates and configures tsconfig.json
• creates and configures .gitignore, .npmignore and .travis.yml
• creates the main library file
• creates a sample directive, component, service and pipe
• creates boilerplate code to conveniently export PROVIDERS, DIRECTIVES and PIPES properties

Quick start

First, install Yeoman and generator-angular2-library using npm (assuming you already have node.js pre-installed).

$ npm install -g yo
$ npm install -g generator-angular2-library

make a new directory and cd into it:

$ mkdir angular2-library-name
$ cd angular2-library-name

and generate your new library:

$ yo angular2-library

The generator will prompt you for:

? Your full name: Jurgen Van de Moere
? Your email address: jurgen.van.de.moere@gmail.com
? Your library name (kebab case): angular2-library-name
? Git repository url: https://github.com/jvandemo/angular2-library-name

and create the following files for you:

.
├── angular2-library-name.ts
├── package.json
├── src
│   ├── directives
│   │   ├── sample.component.ts
│   │   └── sample.directive.ts
│   ├── directives.ts
│   ├── pipes
│   │   └── sample.pipe.ts
│   ├── pipes.ts
│   ├── services
│   │   └── sample.service.ts
│   └── services.ts
└── tsconfig.json

You can then add or edit *.ts files and run:

$ npm run tsc

to automatically create all *.js, *.js.map and *.d.ts files.

PROVIDERS, DIRECTIVES and PIPES

The generator automatically prepares boilerplate code to export convenient bundle properties.

As a library author you are free to choose whether you want to do this or not (see this discussion).

The benefit is that consumers of your library can easily import bundles of services, directives and pipes:

import { Component } from 'angular2/angular2';
import { PROVIDERS, DIRECTIVES, PIPES } from 'angular2-library-name/angular2-library-name';

@Component({
  selector: 'app'
  providers: [PROVIDERS]
  directives: [DIRECTIVES],
  pipes: [PIPES]
})
export class AppComponent{
  // ...
}

The Angular team uses a similar approach with CORE_DIRECTIVES, FORM_DIRECTIVES and ROUTER_PROVIDERS.

To do

• Create build process for building library that automatically registers with SystemJS so it can be hosted statically and imported using <script> element
• Create process for running unit tests

Issues

Please report bugs and issues here.

Development

To run the generator unit tests:

$ npm run test

License

MIT © Jurgen Van de Moere

Change log

v0.2.0

• Added documentation
• Added support for PROVIDERS, DIRECTIVES and PIPES

v0.1.0

• Added documentation
• Added boilerplate scaffolding
• Initial version