完整指南

原文連線 vineo.cn/how-to-buil…

Angular 團隊 在 angular6 中，使得建立 Angular 第三方庫變得更為簡單。如果你以前嘗試過操作，你會發現其實不是很簡單！

那麼流程是什麼呢？

首頁我們構建一個搭建一個簡單的環境，環境裡面包含一些元件和服務以及一些介面。

建立專案

1.按照官方教程，使用ng new命令初始化專案：

ng new lib-demo --prefix ld
複製程式碼

在 angular-cli 第6個之後版本。配置檔案的方式發生了相當大變化，angular.json現在代表angular工作空間,

你可以可以使用ng generate application [my-app-name]命令新增更多專案

你也可以通過 ng generate指令建立一個公共庫。

ng generate library tvmaze --prefix tm
複製程式碼

當然你可以使用簡寫命令

ng g lib tvmaze --prefix tm
複製程式碼

具體參照

使用generate在我們angular.json中新增一個專案。

在庫中建立一個服務

我們會發現tvmaze有它自己的package.json，tsconfig.json，tslint.json和karma.conf.js，這樣建立是有原因的，因為這個專案獨立與主應用建立而成，它本身也有元件、服務、模組。稍後我們新增其他的內容。現在我們新增一些邏輯：

這裡說明下provideIn: root是angular6 之後的新屬性，詳情見官網；如果是為了打包優化。

在庫中建立一個元件

我們使用angular-cli 來建立一個元件

# 使用--project 指定建立在那個工程中
ng generate component poster --project=tvmaze
複製程式碼

然後這樣編輯

將元件註冊到TvmazeModule中，並且exports中是的外部能夠訪問，還得新增 CommonModule,HttpClientModule兩個模組。

構建一下

在我們使用之前，我們先構建一下，我們ng build構建，指定專案。

ng build tvmaze
複製程式碼

使用庫

接下來，我們來使用剛剛構建好的庫，一般我們採用第三方庫都是使用import來匯入。

我們會發現庫不存在。因為這種方式，它是從node_modules尋找，所以我們要在根目錄下tsconfig.json新增paths

接下來我們在主專案中運用：使用<tm-poster>標籤，即可完成

釋出到npm中去

我們直接使用以下命令：前提是你註冊npm賬號

ng build tvmaze
cd dist / tvmaze 
npm publish
複製程式碼