Angular 開發NPM第三方包

步驟：

建立第三方包 》 開發第三方包 》 測試第三方包 》 發佈第三方包 》 使用第三方包

實例:

第一步：建立第三方包;; (建立項目，項目下建立第三方庫)

1. 新建項目

ng new zerolibrary

2. 建立第三方庫

// 目錄切換至新建立的項目
cd zerolibrary

// 建立第三方庫 (--prefix: 前綴；在用命令行新建組件/指令時，selector的屬性值的前綴)
ng g library zero --prefix zm

=== >目錄結構 （多了projects目錄）

第二步：開發第三方包；；(在第三方庫中新建組件、模塊)

1. 第三方庫中新建button組件

// 切換至第三方庫建立組件的位置
cd projects/zero/src/lib

// 新建組件
ng g c button

====> 目錄結構

2. 第三方庫的模塊中導出新建組件，可供外部模塊使用

// zero.module.ts
exports: [ButtonComponent]

第三步：測試第三方包；；；（本地測試第三方包中模塊、組件是否可用）

1. app.module.ts中導入第三方包的模塊文件

// 配置app.module.ts
imports: [ZeroModule]

2. app.component.html中使用第三方包的ButtonComponent組件

<zm-buttom></zm-button>

3. 瀏覽器訪問localhost:4201

第四步：發佈第三方包；；；(npm測試無問題，發佈)

1. 構建npm包

// 切換至第三方包根目錄下
cd projects/zero
// 構建
ng build zero

====>目錄結構 (多了dist目錄)

2. 發佈至npm官網

// 須要登陸(npm login)，有本身的npm帳號
npm publish

---

第五步：使用第三方包；；；(別的項目使用本身新建發佈的NPM包)

1. 項目中安裝

npm install zero@latest --save

2. 在須要使用NPM包的模塊中引入NPM包模塊

imports: [ZeroModule]

3. 在組件中使用便可

<zm-button></zm-buttom>

---

發佈過程當中的問題：

npm ERR! publish Failed PUT 403

緣由一: 當前電腦所使用的npm源未在npm官網上

解決： nrm use npm ，而後再publish

緣由二： 該npm包已經在共有npm網站上存在了

解決：更改package.json文件中的「name」值，而後再publish