如何爲你的 angular app構建一個第三方庫

完整指南

原文鏈接 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
複製代碼