Angular组件库发布到NPM完整指南

WaiterL
94 阅读2分钟

前言

本文详细介绍如何创建Angular组件库并发布到NPM的完整流程，包括环境准备、开发、打包和发布等各个步骤。

目录

环境准备

  • Node.js 和 NPM 环境
  • Angular CLI
  • NPM 账号

组件库开发

1.先新建一个组件库项目

ng new angular-npm-demo

2.新建一个存放组件库的目录

ng g library demo --prefix=demo;

3.进入 projects/demo/src/lib目录下新建一个组件，我的组件名叫做list-page

ng g c list-page

其中对list-page组件的内容进行变更表示是自己的组件

//list-page.component.html
<p>这是我第一个发布到npm上的组件</p>

4.每次新建的组件都需要在对应的module.ts进行exports

//我的demo.module.ts
import { NgModule } from '@angular/core';
import { DemoComponent } from './demo.component';
import { ListPageComponent } from './list-page/list-page.component';



@NgModule({
  declarations: [
    DemoComponent,
    ListPageComponent
  ],
  imports: [
  ],
  exports: [
    DemoComponent,ListPageComponent //注意
  ]
})
export class DemoModule { }

5.在public-api.ts中对新建的组件进行export

/*
 * Public API Surface of demo
 */

export * from './lib/demo.service';
export * from './lib/demo.component';
export * from './lib/demo.module';
export * from './lib/list-page/list-page.component';

打包与发布

1.安装 ng-packagr

npm install ng-packagr --save-dev

2. 安装 tsickle@0.38.1

npm install tsickle@0.38.1

3.打包

切换到对应目录

cd projects/demo/src/lib

 

注意：一定要带上--prod。

ng build demo --prod

打包成功之后会生成一个dist文件，dist文件的具体内容如下

2.发布

注意切换路径！！！！

cd dist/demo

然后执行发布

npm publish

可能出现的问题

1. 包名重名问题

当执行 npm publish 时遇到以下错误:

npm ERR! 403 Forbidden - PUT https://registry.npmjs.org/demo - You do not have permission to publish "demo". Are you logged in as the correct user?

解决方案: 在 dist/demo/package.json 中修改 name 字段为一个唯一的包名:

{
  "name": "your-unique-package-name",
  // ... 其他配置
}

2. 私有包发布问题

当遇到以下错误:

npm ERR! publish Failed PUT 402
npm ERR! code E402
npm ERR! You must sign up for private packages

解决方案: 在根目录的 package.json 中添加:

{
  "private": false
}

3. 版本管理

发布新版本时，需要更新 package.json 中的版本号:

npm version patch  # 小版本更新
npm version minor  # 次版本更新
npm version major  # 主版本更新

注意事项

  1. 发布前确保组件库名称唯一
  2. 遵循语义化版本控制(Semantic Versioning)
  3. 建议添加完善的 README.md 说明文档
  4. 发布前进行充分测试

参考资料

使用示例

1.安装

npm i lycjser-demo

2.在具体的业务中xxx.module.ts引入

import { DemoModule } from 'lycjser-demo';

在装饰器中的imports也得引入

@NgModule({

  imports: [
   　...自己实际业务的module,
    DemoModule
  ],
})

3.在具体的html中使用自己的组件（demo-list-page组件）

//xxx.compotent.html
<demo-list-page></demo-list-page>

效果如下，大功告成

avatar
文章
阅读
粉丝