[Angular] 使用AngularCli搭配ng-packagr建立元件

發表於 更新於 分類於 ， 文章字數： 928 所需閱讀時間 ≈ 3 分鐘

平常我們都用Angular Cli來建立專案，但如果有需要製作元件給別人使用，這時候應該怎麼做比較好

今天會示範如何使用Angular Cli來建立一個元件並且發佈到npm

產生Component

  1. 使用cli產生一個專案
1
ng new my-component
  1. 建立一個獨立的module叫做first
1
ng g m first

給別人的元件一定是獨立的module，除非你要將AppModule當做給人import的module，但一般我們不會這樣做，而是弄一個相對有意義的名稱

  1. 產生一個component叫做red
1
ng g c first/red
  1. 這個功能我們就先讓component的字顏色變成紅色
1
2
3
<p style="color:red">
  <ng-content></ng-content>
</p>
  1. 接著我們先用一般的方式來看看有沒有如我們預期
1
<app-red>this is my first component</app-red>

封裝

這邊我們使用ng-packagr的套件來協助我們達到這件事情

npm i ng-packagr –save-dev

接著我們要產生兩個檔案，首先是ng-package.json，要注意一定要有whitelistedNonPeerDependencies將一些angular已經包含的東西都過濾掉不打包

1
2
3
4
5
6
7
8
9
{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "public_api.ts"
  },
  "whitelistedNonPeerDependencies": [
    "."
  ]
}

再來要產生public_api.ts，這個檔案會描述所有要對外開放的module

1
export * from './src/app/first/first.module';

這些前置作業都做完後，我們就可以來進行編譯，那這邊可以偷懶一點在package.json加上指令

1
2
3
4
5
6
{
    "scripts":{
        "start": "ng serve",
        "packagr": "ng-packagr -p ng-package.json"
    }
}

執行完npm run packagr的指令後，就可以看到增加了一個dist的目錄

測試

上面的動作都執行完以後，我們可以先進行個簡單的測試，用另一個專案將剛剛打包的東西引入

首先要先產生一個可以被npm認識的tgz檔案，所以要先切換到dist的目錄，並且執行指令npm pack，就可以看到dist目錄中會多出my-component-0.0.0.tgz的檔案，這就是要放到另一個專案中被install的檔案

0.0.0是根據package.json的version而來

建立了一個新的專案ng new test-component然後把剛剛產生的檔案放到根目錄，並且執行npm install my-component-0.0.0.tgz，就可以開始使用

首先在AppModule加上我們所建立的Module

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FirstModule } from 'my-component';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FirstModule //我們所建立的module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

再來就是在app.component.html中加上app-red

1
<app-red>hello component</app-red>

執行起來就可以看到畫面上出現hello component並且呈現紅色，那這個功能就是沒問題

當然也可以把這個步驟放到發佈之後，直接從npm上面下載下來

發佈

這個地方就很簡單啦，只要在dist的目錄下執行npm publish就可以發布到npm中囉！

只要跟平常我們安裝新的套件方式一樣，執行npm install my-component就可以

記得先要有npm的帳號，並且在本機登入

參考

Building an Angular 4 Component Library with the Angular CLI and ng-packagr

另一個套件的資料也可以參考

How to build and publish an Angular module

補充

2018/06/20 在線上讀書會中分享，kevin也提到angular cli 6的版本已經包含這個功能

1
ng g library jimmy-demo

執行後，可以看到整個目錄中多了一個projects的目錄，可以看到是一個完整的專案，編譯的話就要特別指定

1
ng build jimmy-demo

一樣可以在dist中看到一個目錄jimmy-demo，只要切到這個目錄底下就可以做npm publish