[转]使用 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