创建并发布一个Angular组件库

最新推荐文章于 2026-05-14 13:04:25 发布

原创

最新推荐文章于 2026-05-14 13:04:25 发布 · 1.6k 阅读

本文详细介绍了如何创建并发布一个Angular组件库，包括创建组件库、开发按钮组件、测试组件以及发布到私有npm仓库和公共npm库。通过实例展示了如何打包、配置路径、导入和使用组件。

文章目录

创建并发布一个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的目录结构如下：
在这里插入图片描述

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"
  }
}

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';

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

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

@Component({
     
     
  selector: 'c

标签

#angular #前端

最低0.47元/天解锁文章