关于前端:保姆级的使用angular搭建自己的组件库

如果应用 npm install 就能够装置自定义的组件库呢

1、ng new projectname

此处的 projectname 为项目名称，我创立的为 gram-angular2

2、以创立一个 gram.module 和 header.component 为例。能够用 cli 命令或者手动创立

ng generate module modules/gram
ng generate component modules/header

3、在 gram.module.ts 增加内容

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {HeaderComponent} from '../header/header.component';

@NgModule({
 declarations: [HeaderComponent  // 这里改变了],
 imports: [CommonModule],
 exports: [HeaderComponent   // 这里改变了]
})
export class GramModule {}

exports 确保将该模块中导出的组件能够被其它模块引入并应用。

4、增加 GramModule 到 app.module 中：

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {GramModule} from './modules/gram/gram.module';

@NgModule({
 declarations: [AppComponent,],
 imports: [
 BrowserModule,
 GramModule   // 这里改变了
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule {}

此时，就能够在 app.component.html 应用 HeaderComponent 组件了：

<app-header></app-header>

ng-packagr

ng-packagr 能够将 ng 我的项目编译并打包成一个 umd 标准的 library，以便能够被其它的 ng 我的项目所应用。

5、装置 ng-packagr：

npm install ng-packagr --save-dev 

在我的项目根目录下增加两个文件 ng-package.json 和 public_api.ts。

ng-package.json 内容：

{
 "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
 "lib": {"entryFile": "public_api.ts"}
}

在 public_api.ts 中导出 header.module.ts：

export * from './src/app/modules/header/header.module'

在 package.json 文件中增加 packagr 脚本命令，并将 private 属性设置为 false：

"scripts": {
 "ng": "ng",
 "start": "ng serve",
 "build": "ng build",
 "test": "ng test",
 "lint": "ng lint",
 "e2e": "ng e2e",
 "packagr": "ng-packagr -p ng-package.json"
},
"private": false

删除掉 dependencies 没有应用的依赖

7、运行 packagr 脚本命令

npm run packagr

完结后会生成一个 dist 文件夹，就是咱们须要的 library 包了。还能够进一步将 dist 打包成 tgz 文件：

cd dist
npm pack

dist 文件夹里就会多出一个 ng-packagr-test-0.0.0.tgz，名称和版本号均取自 package.json。

自此，咱们就能够通过磁盘相对路径来装置本人的 library 了，如：

npm install ../../program-name/dist/gram-angular2-0.0.0.tgz  

8、通过本人的 npm 账号公布到 npmjs，前提是确保包名是惟一的：

npm publish dist