客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称（OpenSource Name）：jvandemo/generator-angular2-library开源软件地址(OpenSource Url)：https://github.com/jvandemo/generator-angular2-library开源编程语言(OpenSource Language)：JavaScript 84.9%开源软件介绍(OpenSource Introduction)：
Yeoman generator to create a standalone Angular library in seconds. If you want to create an Angular library with directives, services and/or pipes, then this generator is just what you need. This generator aligns with the official Angular Package Format and automatically generates a Flat ES Module, a UMD bundle, a single metadata.json and type definitions to make your library ready for AOT compilation by the consuming Angular application. Watch Jason Aden's talk to learn more about the Angular Package Format. More specifically, the latest version of this generator:
This generator is built for Angular version 2 and above, hence the name generator-angular2-library. If you are looking for a similar generator for AngularJS 1.x, please visit generator-angularjs-library. 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-librarymake a new directory and $ mkdir angular-library-name
$ cd angular-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): angular-library-name
? Git repository url: https://github.com/jvandemo/angular2-library-nameand create the following files for you: .
├── README.MD
├── gulpfile.js
├── package.json
├── src
│ ├── index.ts
│ ├── package.json
│ ├── sample.component.ts
│ ├── sample.directive.ts
│ ├── sample.pipe.ts
│ ├── sample.service.ts
│ └── tsconfig.es5.json
├── tsconfig.json
└── tslint.jsonYou can then add or edit $ npm run buildto automatically create all dist
├── index.d.ts # Typings for AOT compilation
├── index.js # Flat ES Module (FESM) for use with webpack
├── lib.d.ts # Typings for AOT compilation
├── lib.metadata.json # Metadata for AOT compilation
├── lib.umd.js # UMD bundle for use with Node.js, SystemJS or script tag
├── package.json # package.json for consumer of your library
├── sample.component.d.ts # Typings for AOT compilation
├── sample.directive.d.ts # Typings for AOT compilation
├── sample.pipe.d.ts # Typings for AOT compilation
└── sample.service.d.ts # Typings for AOT compilationFinally you publish your library to NPM by publishing the contents of the $ npm publish distTypeScript configThe generator creates 2 TypeScript config files:
Linting your codeYour library comes pre-configured with tslint and codelyzer support. To lint your code: $ npm run lintBuilding your libraryFrom the root of your library directory, run: $ npm run buildThis will generate a
Generating documentation for your libraryFrom the root of your library directory, run: $ npm run docs:buildThis will generate a To serve your documentation, run: $ npm run docs:serveand navigate your browser to To automatically rebuild your documentation every time a file in the $ npm run docs:watchFor more features, check out the compodoc website. Publishing your library to NPMTo publish your library to NPM, first generate the $ npm run buildand then publish the contents of the $ npm publish distConsuming your libraryOnce you have published your library to the NPM registry, you can import it in any Angular application by first installing it using NPM: $ npm install sample-library # use the name you used to publish to npmand then importing your library in your Angular import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import your library
import { SampleModule } from 'sample-library';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify your library as an import
SampleModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Once your shared library is imported, you can use its components, directives and pipes in your Angular application templates: <!-- app.component.html -->
<h1>{{ title }}</h1>
<sample-component>
This component is part of the shared library and will now work as expected.
</sample-component>and if you need to access a service from your shared library, you can inject it using Dependency Injection: import { Component } from '@angular/core';
// Import the shared service
import { SampleService } from 'sample-library';
@Component({
template: 'Injecting a service from the shared library'
})
export class HomeComponent {
// Inject the service using Angular DI
constructor(private sampleService: SampleService){
}
}To learn more about Angular Dependency Injection, check out the Official Angular Documentation. Preview your library during developmentTo preview your library code during development, start the playground: $ npm run playgroundChanges to your library code will be updated live in the browser window:
Consuming your library in a local application during developmentTo consume your library in a local application before you publish it to npm, you can follow the following steps:
Let's assume you name your library
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import your library
import { SampleModule } from 'sample-library';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify your library as an import
SampleModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
<!-- app.component.html -->
<h1>{{ title }}</h1>
<sample-component>
This component is part of the shared library and will now work as expected.
</sample-component>and if you need to access a service from your shared library, you can inject it using Dependency Injection: import { Component } from '@angular/core';
// Import the shared service
import { SampleService } from 'sample-library';
@Component({
template: 'Injecting a service from the shared library'
})
export class HomeComponent {
// Inject the service using Angular DI
constructor(private sampleService: SampleService){
}
}
{
"compilerOptions": {
// ...
// Note: these paths are relative to `baseUrl` path.
"paths": {
"@angular/*": [
"../node_modules/@angular/*"
]
}
}
}When you npm link a library with peer dependencies, the consuming application searches for the peer dependencies in the library's parent directories instead of the application's parent directories. If you get to make sure the consuming application searches for the peer dependencies in the application's node_modules directory. Frequently asked questionsHow can I configure Karma?Currently, the generator does not create a custom Karma configuration for running unit tests. If your library requires a custom Karma setup, please check out this tutorial on how to configure Karma for your library (Credits to Raphael). As soon as official recommendations are available on how to set up Karma for testing libraries, this generator will be updated accordingly. How can I use a scoped package name?First update the package name in "name": "@scope/library-name"and then also update "flatModuleId": "@scope/library-name"See #75 for more information. How can I avoid recompilation during developmentIf you experience issues (#72) or want to avoid constant recompilation of your library during development, you can also This will let you consume the TypeScript code directly from the How can I use .scss files?Simply store your styles in a file with a filename extension of So if you have a h1 {
color: red;
}then reference it in your component's @Component({
selector: 'sample-component',
template: `<h1>Sample component</h1>`,
styleUrls: [
'sample.component.scss'
]
})The .scss files will automatically be compiled and inlined in your library bundle. How can I import .scss filesTo import a .scss file in an existing .scss file, you can specify a relative path: or use a tilde to import a file from the nearest parent How can I see which version of the generator I have installedFrom the command line, run: How can I update my generator to the latest version?From the command line, run $ yoand select the option Update your generators. What if my library depends on a third party library?If your library depends on a third party library such as Angular Material or PrimeNG, you don't have to include the third party library in your library. Instead, you should add the third party library as a peer dependency to the "peerDependencies": {
"@angular/core": "^4.0.0",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
}This causes a warning to be displayed when the consuming application runs The generator already adds Consider the following scenario where your library depends on a third party library called "PrimeNG". In your Angular library:
In the consuming Angular application
To see a fully documented example, check out this guide. How can I upgrade my library to support Angular 5Version 12 or later of this generator supports Angular 5. If you have an existing library that was generated with an earlier version of this generator:
See #230 for more information. IssuesPlease report bugs and issues here. DevelopmentTo run the generator unit tests: $ npm run testLicenseMIT © Jurgen Van de Moere Change logv12.4.1
v12.4.0
v12.3.0
v12.2.1
v12.2.0
v12.1.0
v12.0.0
|
请发表评论