angular?cli不僅可以很方便的讓開發(fā)者創(chuàng)建自己的項(xiàng)目，組件，模塊，變異等，?還可以實(shí)現(xiàn)創(chuàng)建和發(fā)布自己的庫（library）。這里主要還用到了ng-packagr的庫。下面我們看下步驟
參考文章：?Building an Angular 4 Component Library with the Angular CLI and ng-packagr
安裝node，?npm，?angular?cli
npm?install @angularcli -g
創(chuàng)建我們的angular項(xiàng)目
ng?new?my-component-library
cd進(jìn)入項(xiàng)目路徑下安裝依賴，啟動(dòng)
cd?my-component-library
npm install
ng serve
這時(shí)候，我們的項(xiàng)目啟動(dòng)起來了，可以通過localhost：4200訪問了。
下面讓我們創(chuàng)建一個(gè)header的組件并做成通用的lib來使用。
創(chuàng)建header?模塊/組件
ng?generate?module?modules/header
創(chuàng)建組件
ng?generate?component?modules/header
然后在src/app/modules/header下會(huì)創(chuàng)建如下文件
header.component.css
header.component.html
header.component.spec.ts
header.component.ts
header.module.ts
編寫header內(nèi)容
header.component.html
<h1>? ? <ng-content></ng-content>
<h1>
加樣式
header.component.css
h1 {
? ? color: red;
}
導(dǎo)出我們編寫的lib
在header.module.ts里添加export數(shù)組將HeaderModule加進(jìn)去
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header.component';
@NgModule({
? ? ? ? imports:? [
? ? ? ? ? ? ? ? CommonModule
? ? ? ? ],
? ? ? ? ?declarations:? [
? ? ? ? ? ? ? ? HeaderComponent
? ? ? ? ?],
? ? ? ? ?exports:? [
? ? ? ? ? ? ? ? HeaderComponent
? ? ? ? ? ]
})
export class HeaderModule { }
這樣就將我們的HeaderMoudle導(dǎo)出可以在其他地方使用了。
在app.component.html里使用
先將header Module?import進(jìn)來。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// import our module
import { HeaderModule } from './modules/header/header.module';
@NgModule({
????????declarations: [
????????????????AppComponent
????????],
????????imports: [
????????????????BrowserModule,
????????????????HeaderModule // import it into our @NgModule block
????????],
????????providers: [],
????????bootstrap: [AppComponent]
})
export class AppModule { }
使用app.component.html
<app-header>Such Header</app-header>
這時(shí)候啟動(dòng)，如果能看到起作用了，說明開發(fā)完成就準(zhǔn)備打包。如果有問題修改代碼fix問題。
ng-packagr
安裝
ng?install ng-packagr --save-dev
或者將ng-packagr的配置加到package.json內(nèi)執(zhí)行
npm?install
我們需要添加2個(gè)文件到我們的項(xiàng)目ng-package.json和public_api.ts
ng-package.json是用來配置ng-packagr和找到public_api.ts的路徑
ng-package.json
{
????"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
????"lib": {
????????????"entryFile": "public_api.ts"
????}
}
Tips：?如果有whitelistedNonPeerDependencies報(bào)錯(cuò)，在ng-package.json加入如下代碼：
{
? "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
? "lib": {
? ? ????"entryFile": "public_api.ts"
? },
? "whitelistedNonPeerDependencies": [
? ????? "."
? ]
}
在public-api.ts導(dǎo)出header.module.ts
export * from './src/app/modules/header/header.module'
在package.json里配置ng-packagr的命令。（將private改成false以備將來要發(fā)布才library）
"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
這時(shí)候我們就可以打包我們的package了
運(yùn)行
npm?run?packagr
完成的時(shí)候會(huì)在根目錄下生成dist目錄，這就是我們的library了，可以再進(jìn)入dist目錄壓縮
cd?dist
npm?pack
這時(shí)候在此目錄下就生成
my-component-library-0.0.0.tgz
版本號(hào)是在package.json里定義的。這時(shí)候我們可以將此包通過npm?install?安裝就可以使用了 。
npm?install? ../此包的相關(guān)路徑/my-component-library-0.0.0.tgz在app.module.ts里import進(jìn)去就可以使用了。
當(dāng)然也可以發(fā)布到npm
需要
npm?loggin
登錄到npm
然后
npm?publishe?dist
發(fā)布出去就可以了。這里就沒有發(fā)布了，需要發(fā)布的可以去嘗試。遇到問題在谷歌吧。
