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
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.
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
.
- 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
Please report bugs and issues here.
To run the generator unit tests:
$ npm run test
MIT © Jurgen Van de Moere
- Added documentation
- Added support for
PROVIDERS
,DIRECTIVES
andPIPES
- Added documentation
- Added boilerplate scaffolding
- Initial version