從接觸Angular到如今，做了不少Angular項目，使用了不少第三方庫，但是卻沒有勇氣觸碰第三方庫的開發，一是沒有太多的積累，二是沒有找到合適的“Hello world”的文檔。
最近有機會要把項目中常用的Component做成第三方庫，方便更多的項目使用。根據網上找到的各種資料，加上走的各種彎路，終于摸清楚了開發第三方庫的流程。
搭建項目框架
為了方便第三方庫的開發，我們首先要創建一個主應用A：
ng new projectnameA //創建主應用
主應用A創建好之后，創建Lib：
cd projectnameA
ng g library libName --prefix prefixName //--prefix是Lib使用的前綴
上述命令會對主應用如下改變：
在主應用A下創建 projects/libName 目錄，并將Lib的相關文件放于此；
-
在 angular.json 文件中添加 libName 項目；
"libName": { "root": "projects/libName", "sourceRoot": "projects/libName/src", "projectType": "library", "prefix": "dteam-top", "architect": { "build": { "builder": "@angular-devkit/build-ng-packagr:build", "options": { "tsConfig": "projects/libName/tsconfig.lib.json", "project": "projects/libName/ng-package.json" }, "configurations": { "production": { "project": "projects/libName/ng-package.prod.json" } } }, "test": {...}, "lint": {...} } }其中：
root為Lib的根目錄；
sourceRoot為Lib的源代碼目錄；
projectType為項目的類型；
prefix為組件使用的前綴；
architect為Angular的構建配置，可設置 build、test 和 lint。 在 package.json 文件中添加 ng-packagr 依賴；
-
在 tsconfig.json 文件中添加 libName 庫的引用；
{ ... "paths": { "libName": [ "dist/libName" ] } ... }
這樣項目框架就搭建好了，可以開始寫Lib的代碼了。
Lib開發
在Lib中需要注意一個文件：public_api.ts，這個文件是Lib的入口文件，取代了之前使用的index.ts文件，其中定義了Export的內容：
````
export * from './app/libName.component';
export * from './app/libName.module';
````
主應用A要使用Lib，在app.module.ts文件中直接引用：
import { LibNameModule } from '../../../../projects/libName/src/app/libName.module'
imports: [
...
LibNameModule,
...
]
對于Lib中使用的其他組件，可在主應用A下通過npm安裝，這里提醒下，這里是安裝到主應用A的目錄下，修改的是主應用A的package.json和package.lock.json文件。
這樣，就可以開發自己的Lib了。
測試Lib的安裝
Lib開發好之后，需要先在本地試安裝。這時有疑問了，Lib中用到的其他組件的引入都是在主應用A的package.json中聲明的，這對于Lib是不對滴。
細心的開發者會發現，在Lib的目錄下也有一個package.json文件，其缺省內容為：
{
"name": "libName",
"version": "0.0.1",
"peerDependencies": {
"@angular/common": "7.0.2",
"@angular/core": "7.0.2",
}
}
我們需要把這個文件補充完整，將Lib中用到的其他第三方組件在peerDependencies中引入，并將Lib的其他屬性也加入。例如：
{
"name": "ligName",
"version": "0.0.1",
"keywords": ["keyword1","keyword2"],
"license": "MIT",
"author": "authorName",
"description": "description",
"peerDependencies": {
"@angular/common": "7.0.2",
"@angular/core": "7.0.2",
"@angular/forms": "7.0.2",
"@angular/router": "7.0.2",
"@angular/cdk": "7.0.2",
"@angular/material": "7.0.2",
"ngx-spinner": "7.0.0",
"ngx-clipboard": "12.0.0",
"ethers": "4.0.27",
"rxjs": "6.3.3"
}
}
同時，還可以添加一個README.md文件，介紹Lib的使用方法。
準備工作做好之后，將Lib編譯成產品：
ng build libName --prod
編譯后的文件會放置在主應用A的dist/libName目錄下。另外創建一個Angular應用B，在此應用下執行：
npm install 主應用A/dist/libName
安裝時會對libName使用的其他第三方庫給出類似如下的提示：
npm WARN libName@0.0.1 requires a peer of @angular/core@^7.2.0 but none is installed. You must install peer dependencies yourself.
根據提示，自行安裝缺少的組件即可。
在應用B的package.json中會看到對libName的引入：
"libName": "file:../projectnameA/dist/
在應用B的package-lock.json文件中加入如下內容：
"libName": {
"version": "file:../projectnameA/dist/libName",
"requires": {
"tslib": "^1.9.0"
},
"dependencies": {
"tslib": {
"version": "1.9.3",
"bundled": true
}
}
}
在應用B的app.module.ts文件中引入libName：
import { LibNameModule } from 'libName';
...
imports: [
...
LibNameModule,
...
],
...
在應用B中可以測試libName能否正常使用。
Lib發布
上述過程結束后，就可以將應用發布到npm上。準備工作：
- 在npm上注冊賬號。
- 在命令行下執行：npm adduser，將賬號添加到本地。
好了，可以發布libName了。進入到projectnameA/dist/libName目錄下執行：
npm publish
看到了發布成功提示，還有點小激動。進入到npm中，可以看到已經發布成功的libName。
如果想刪除這個libName，可以使用如下命令：
npm unpublish libNamet@0.0.1 --force
這里需要特別注意的是：刪除后的libName，在24小時內不能再發布了，見如下提示：
npm ERR! libName cannot be republished until 24 hours have passed.
總結
npm為第三方庫的開發還提供了一些便利的方法，如npm link命令。這些都有待我們在今后的開發中摸索和體驗，以便更好的打磨精品組件。
附錄
在開發過程中遇到了幾個錯誤，現匯總如下：
-
權限錯誤：
npm ERR! publish Failed PUT 403 npm ERR! code E403 npm ERR! You do not have permission to publish "libName". Are you logged in as the correct user? : libName解決辦法，執行： npm adduser
-
libName若注入了其第三方的服務，主應用調用時出現如下錯誤：
Error: inject() must be called from an injection context解決方法，在主應用的angular.json文件中添加：
"projects": { "projectName": { "architect": { "build": { "options": { "preserveSymlinks":true }, }, } } } }, 若libName定義了自己的route，需要在主應用中注入RouterModule。
