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.jsonfor your library - creates and configures
tsconfig.jsonfor your library - creates and configures
tslint.jsonfor your library - creates and configures
typings.jsonfor your library - creates and configures
.gitignore,.npmignoreand.travis.yml - creates the main library file
- creates a sample directive, component, service and pipe
- creates boilerplate code to conveniently export
PROVIDERS,DIRECTIVESandPIPESproperties - creates a default export for future compatibility with angular cli, see this discussion for more
- configures tslint for you with codelyzer support
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-librarymake a new directory and cd into it:
$ mkdir angular2-library-name
$ cd angular2-library-nameand generate your new library:
$ yo angular2-libraryThe 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-nameand create the following files for you:
.
├── .gitignore
├── .npmignore
├── .travis.yml
├── package.json
├── README.md
├── src
│ ├── directives
│ │ ├── sample.component.ts
│ │ └── sample.directive.ts
│ ├── directives.ts
│ ├── index.ts
│ ├── pipes
│ │ └── sample.pipe.ts
│ ├── pipes.ts
│ ├── services
│ │ └── sample.service.ts
│ └── services.ts
├── tsconfig.json
├── tslint.json
└── typings.jsonYou can then add or edit *.ts files in the src/ directory and run:
$ npm run tscto automatically create all *.js, *.js.map and *.d.ts files in the dist/ directory.
Everything comes pre-configured with tslint and codelyzer support. To lint your code:
$ npm run lintThe 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/core';
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 testMIT © Jurgen Van de Moere
- Updated dependencies in package.json to Angular 2 final
- Updated templates to Angular 2.0.0 RC3 syntax
- Updated with file structure using
srcanddistdirectory
- Updated templates to Angular 2.0.0 RC1 syntax
- Added codelyzer support
- Added tslint support
- Added typings support
- BREAKING CHANGE: Updated to support Angular 2.0.0-rc.1
- Updated dependency versions
- Added
browser.d.tsto files intsconfig.jsoninstead of using tripleslash (see #9)
- Added reference to Angular typings
- Removed explicit RxJS dependency
- Updated to Angular 2 beta
- Added documentation
- Added support for
PROVIDERS,DIRECTIVESandPIPES
- Added documentation
- Added boilerplate scaffolding
- Initial version
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent