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
andPIPES
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: [email protected]
? 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
andPIPES
v0.1.0
- Added documentation
- Added boilerplate scaffolding
- Initial version