如何使用 Angular Cli 建立 Angular 私有庫
在實際開發中，會發現我們好多工作都是重複的，在程式碼層面，發現好多程式碼是可以被重用的。這樣我們就可以建一個庫，類似於java的庫，來提高工作效率。
建立Angular專案
開啟命令列終端， cd 到用於建立應用的目錄下，執行建立Angular專案命令：
ng new arsprojects -S
此命令將會建立一個新的Angular專案，資料夾名為 arsprojects 。 -S 引數表示不建立測試檔案。我們建立的ng庫都將依託於 arsprojects 專案，它只是作為ng庫的容器存在，不需要建立測試。
用IDE開啟 arsprojects 專案。
看到的檔案結構就是我們常用的Angular專案結構。平時我們開發Angular專案，就是在 src/app 目錄下進行的。
我們想建的是一個ng庫，它和原來的Angular專案還是有一定差異的，ng庫不需要操作 src/app 下的內容。
建立一個元件庫
ng g library ars-components -p ars
g 是generate的簡寫方式， library 表示我們建立的是一個庫。 -p ars 表示我們建立的庫裡面的元件是以 ars 開頭的。例如我們建立一個checkbox元件，那麼他的selector就是 ars-checkbox ，在HTML中通過標籤來使用我們元件。
執行完該命令後，在ide中會發現，在我們的arsprojects中多了一個 projects 資料夾，裡面是我們剛建立的 ars-components 。
同時，我們一開始建立arsprojects專案時建立的angular-cli.json也會被修改。裡面會增加 ars-components 的專案資訊。
"ars-components": {
"root": "projects/ars-components",
"sourceRoot": "projects/ars-components/src",
"projectType": "library",
"prefix": "ars",
"architect": {
"build": {
"builder": "@angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "projects/ars-components/tsconfig.lib.json",
"project": "projects/ars-components/ng-package.json"
},
"configurations": {
"production": {
"project": "projects/ars-components/ng-package.prod.json"
}
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/ars-components/src/test.ts",
"tsConfig": "projects/ars-components/tsconfig.spec.json",
"karmaConfig": "projects/ars-components/karma.conf.js"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/ars-components/tsconfig.lib.json",
"projects/ars-components/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "arsprojects"
同時會在 tsconfig.json 中建立 paths 選項。
"paths": {
"ars-components": [
"dist/ars-components"
]
通過修改tsconfig.json配置，可以讓我們方便的使用ars-components庫。
建立web站點專案
ng g application arswebsite --prefix web
此命令通過 application 腳手架建立一個名為 arswebsite 的專案，selector字首為 web 。在ide中發現在ars-commponents同級目錄下建立了arswebsite和arswebsite-e2e兩個資料夾。
執行專案
在執行專案前，先做一些小改動，用於區分專案。
修改 projects/arswebsite/src/app/app.component.html 為
<h1>ArsWeb</h1>
修改 src/app/app.component.html 為
<h1>Main Angular App</h1>
啟動專案
ng serve
開啟瀏覽器，訪問 http://localhost:4200。
另開啟一個終端，執行命令
ng serve arswebsite --port 4201
開啟瀏覽器，訪問 http://localhost:4201。
此時會發現，訪問了兩個不同的專案內容。
在ng庫中建立新元件
cd projects/ars-components/src/lib ng generate component checkbox --project=ars-components
這樣就會在我們的ars-components庫中建立一個checkbox元件，元件的selector為ars-checkbox
編譯元件
cd yourfolder/arsprojects ng build ars-components
會在dist目錄下生成ars-components編譯後的內容。 
安裝元件
編譯後的元件，想要使用，需要現在本地安裝。
npm install dist/ars-components
使用元件
在arswebsite中使用ars-components元件，此時和使用其他第三方元件沒有任何區別。
website/src/app/app.moudle.ts 中引入 ArsComponentsModule :
import { ArsComponentsModule } from 'ars-components';
....
imports: [
BrowserModule, ArsComponentsModule
],
這樣就可以在arswebsite中直接使用自定義庫中的庫元件了。
arswebsite/src/app/app.component.html 新增自定義元件
<ars-checkbox></ars-checkbox>
總結
在使用Angular cli建立庫總體來說還是很方便的，建立庫的意義就是讓我們在實際開發過程中，總結的一些可以被複用的程式碼形成一個可被共享的資源，從而提高效率。
Author ：笑笑粑粑
曾用網名：TinyKing
微信公眾號：Java碼農
知乎專欄： 愛笑笑愛分享
個人部落格： 愛笑笑，愛生活
自我評價： 一個愛好廣泛的CRUD程式猿 ^_^