使用 Angular CLI 和 ng-packagr 構建一個標準的 Angular 組件庫

原文地址 https://segmentfault.com/a/1190000010900969

使用 Angular CLI 構建 Angular 應用程序是最方便的方式之一。

項目目標

現在，我們一起創建一個簡單的組件庫。

首先，我們需要創建一個 header 組件。這沒什麼特別的，當然接下來會明白的。

我們能從中能得到什麼收穫？

• 自動生成項目結構

• 自動生成組件庫的組件、模塊和服務

• 自動生成組件庫的測試用例

• 在打包組件庫之前會自動生成對應的測試環境測試組件庫中的組件

• 自動打包組件庫爲 Angular Package 的標準格式

準備工作

首先，安裝 Angular CLI ，如下所示：

npm install @angular/cli -g

Angular CLI 安裝完成後，接着創建組件庫

ng new my-component-library

ng-server 將會從組件庫的目錄開始啓動項目

接下來，啓動項目，如下：

ng serve --port 4200

在瀏覽器中輸入 localhost:4200 ，可以看到：

創建一個組件

使用 CLI 生成一個 header 組件，同時設置組件的選擇器爲 app-header，新建一個文件夾 modules 。

在 module 文件夾中創建一個 header 功能組件

創建 header 模塊：

ng generate module modules/header

創建 header 組件：

ng generate component modules/header

這裏會在 src/app/modules/header 文件夾生成如下文件：

header.component.css

header.component.html

header.component.spec.ts

header.component.ts

header.module.ts

定製組件 header 內容

打開 header.component.html 文件，並替換爲如下內容：

<h1>
  <ng-content></ng-content>
</h1>

美化 header 組件

設置組件 h1 標籤的字體顏色爲紅色

h1 {
  color: red;
}

從 module 中導出我們的組件

打開 header.module.ts 文件，並在 @NgModule 中添加 exports ，並導出 HeaderComponent

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header.component';
@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    HeaderComponent
  ],
  exports: [
    HeaderComponent // 導出組件 
  ]
})
export class HeaderModule { }

在應用中確保在使用 HeaderComponent 組件之前導入 HeaderModule 模塊並在 @NgModule 的 declarations 中聲明。如果沒有在 exports 中導出 HeaderComponent ，則組件能且只能在它的模塊中使用，而不能在其他模塊中使用。

實際操練

打開 app.component.html 並替換爲如下內容：

<app-header>Such Header</app-header>

我們給 設置了內容 “Such Header” ，這個內容將會替換 header 模板中 佔位符。

最後，需要導入 HeaderModule 到 AppModule 中，這樣 app.component.html 才知道如何渲染 。

在 app.module.ts 文件的 imports 中添加 HeaderModule 。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// 導入我們的模塊 
import { HeaderModule } from './modules/header/header.module';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HeaderModule // import it into our @NgModule block
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ng-packagr

n-packagr 是一個 node 庫，它可以編譯和打包 TypeScript 庫爲 Angular 包的標準格式。我們將會使用它來把我們的組件打包成 Angular 包標準格式的組件庫，使得它可以在任意的 Angular 項目中使用。

在項目的根目錄中執行

 npm install ng-packagr --save-dev

安裝 n-packagr ，這時將會開始下載 n-packagr ，同時在 package.json 文件中的 devDependency 聲明包依賴，我們可以在 npm scripts 中調用它。

根據ng-package文檔得知，我們需要在我們的項目中添加兩個文件，ng-package.json 和 public_api.ts。，ng-package.json 用來配置 n-packagr 並告訴它去哪裏找 public_api.ts 文件，這個文件通常是用來導出我們組件庫的功能模塊。（備註：public_api.ts 文件是 Angular 組件的使用約定）

在 ng-package.json 文件中添加如下內容：

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "public_api.ts"
  }
}

並且，在 public_api.ts 文件中導出 header.module.ts

export * from './src/app/modules/header/header.module'

在 package.json 文件中的 scripts添加

"packagr": "ng-packagr -p ng-package.json"

，告訴 ng-packagr 根據 ng-package.json 來打包我們的組件庫。同時，設置 “private”: false 。

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "packagr": "ng-packagr -p ng-package.json"
},
"private": false

創建組件包

運行

npm run packagr

創建組件包，創建完成後會在項目的根目錄中生成 dist 文件夾，裏面的內容就是我們生成的標準的 Angular 組件庫的結構。

爲本地開發打包組件庫

我們可以在應用中使用 npm install 安裝本地的開發包。進入 dist 目錄執行 npm pack打包組件庫，打包完成後，會在項目的根目錄生成 my-component-library-0.0.0.tgz，0.0.0來至於 package.json 文件中一部分。