如何為你的 angular app構建一個第三方庫
完整指南
原文連線 ofollow,noindex">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>
標籤,即可完成
