526互联

使用Angular创建组件，并发布到npm上

发布时间 2023-12-01 14:44:41作者: 飞飞飞飞0928

1.组件准备工作

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

2.npm发布前的准备工作

1.安装 ng-packagr

npm install ng-packagr --save-dev

2. 安装 tsickle@0.38.1

npm install tsickle@0.38.1

3.npm 账号准备

假设你已经有npm账号了，那么就开个终端
npm adduser
输入你的账号，密码，邮箱，这样以后npm publish就不用每次输密码了；

3.打包并发布

1.打包

ng build demo --prod

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

2.发布

npm publish

可能出现的问题

名字重名了，在dist/demo/package.json修改name

4.检验发布是否成功

登陆自己的npm账户查看

5.使用

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>




效果如下，大功告成