[转]使用 Angular CLI 和 ng-packagr 构建一个标准的 Angular 组件库

使用 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 ，可以看到：

 

页面显示是 Angular CLI 构建项目的默认展示

创建一个组件

使用 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>

我们给 <app-header></app-header> 设置了内容 "Such Header" ，这个内容将会替换 header 模板中 <ng-conent></ng-content>占位符。

最后，需要导入 HeaderModule 到 AppModule 中，这样 app.component.html 才知道如何渲染 <app-header> 。

在 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 serve 启动本地服务，打开浏览器输入 localhost:4200 可以看到如下：

 

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 文件中一部分。

在其他的 Angular 项目中有依赖你的组件库，则可以使用 `npm install ./path/dist/my-component-library-0.0.0.tgz 安装本地依赖包。

在 npm 网站上发布我们的组件库

使用 npm login 登录 npm 账号，然后使用 npm public 发布我们的组件库。需要注意的是，发布时需要确保我们定义的包名是唯一的（本例中使用：my-component-library）。发布成功后，就可以在我们的应用中使用 npm install my-component-library 安装和使用我们的组件库。

发布过程中遇到一个错误： Package name triggered spam detection; if you believe this is in error, please contact support@npmjs.com 

解决方法： 修改包名

 

使用我们自定义的组件库

安装完成后，把组件导入到 app.module.ts ，并在 @NgModule 中的 imports 数组中添加导入的 HeaderModule 组件库...

import { HeaderModule } from 'my-package-name';//引入我们自定义的组件库

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HeaderModule  // 在这里导入
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在应用程序的模板中使用组件库中组件定义的选择器，使得组件库中的组件成为我们应用程序中的一部分。

 

// app.component.html
<h1>
   {{ title }}
</h1>
<!-- 看这里，在这里使用 -->
<app-header></app-header>
<!-- end -->


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