创建并发布一个Angular组件库

创建并发布一个Angular组件库

随着公司业务的不断发展，不同产品或团队之间公用的组件越来越多，这时候就需要一套支持内部使用的组件库。本文将会介绍如何创建并发布一个Angular组件库。

创建组件库

• 首先我们来创建一个Angular项目，用来管理组件的展示和发布。用以下命令来生成一个cindylib的项目。

  ng new cindylib --createApplication=false
  

• 项目初始化完成后，进入到项目下，然后创建一个组件库cindy。

  cd cindylib
  ng generate library cindy
  

• 现在我们需要创建一个项目来测试cindy这个组件库。

  ng generate application cindytest
  

• 在angular.js文件中可以看到有两个项目。一个是cindy，类型为library，是我们的组件库。一个是cindytest。类型为application，是用来测试组件库的。
  

开发一个按钮组件

• 组件库cindy的目录结构如下：
  

  1. ng-package.json中配置了cindy组件库打包后的文件路径为dist/cindy，以及组件库的入口文件为public-api.ts。

     {
            
       "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
       "dest": "../../dist/cindy",
       "lib": {
            
         "entryFile": "src/public-api.ts"
       }
     }
     

  2. public-api.ts用于导出module、组件、service等，是对外暴露的入口。

     /*
      * Public API Surface of cindy
      */
     
     export * from './lib/cindy.service';
     export * from './lib/cindy.component';
     export * from './lib/cindy.module';
     

  3. 我们需要开发的单个组件放在lib目录下。

• 在lib目录下面创建一个button的文件夹，并在该文件夹下创建button.component.ts和button.module.ts文件。

  // button.component.ts
  import {
        Component } from '@angular/core';
  
  @Component({
       
    selector