Angular 开发NPM第三方包
创始人
2025-06-01 19:35:29
0

准备工作

  1. 首先已经安装过node以及angular
  2. 以及注册过npm账号
    在这里插入图片描述
    在这里插入图片描述

新建项目

ng new zero

在这里插入图片描述

创建第三方库

  1. 目录切换至新创建的项目 cd zero
  2. 创建第三方库 (–prefix: 前缀;在用命令行新建组件/指令时,selector的属性值的前缀)
    ng g library zero-test --prefix zhx

在这里插入图片描述
文件夹目录
文件夹目录

开发第三方库(在第三方库中新建组件、模块)

  1. 切换至第三方库创建组件的位置 cd projects/zero-test/src/lib
  2. 创建button组件ng g c button

文件夹目录
将第三方中组件导出
在这里插入图片描述
在angular升级到13以后需要将组件在public-api中进行声明
在这里插入图片描述
测试第三方包
将module在app.module中引入,并使用新建的button组件,通过ng-serve启用应用,看到button组件已经生效
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

打包

  1. 切换至第三方包根目录下 cd projects/zero-test
  2. 执行打包语句 ng build zero-test
    在这里插入图片描述
    打包完成后多出一个dist文件夹
    在这里插入图片描述

发布

这时候需要用到npm账号

npm publish

可能会遇到的问题
npm ERR! publish Failed PUT 403
原因一: 当前电脑所使用的npm源未在npm官网上
解决: nrm use npm ,然后再publish
原因二: 该npm包已经在共有npm网站上存在了
解决:更改package.json文件中的“name”值,然后再publish

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
有效的括号 一、题目 给定一个只包括 '(',')','{','}'...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
【Ctfer训练计划】——(三... 作者名:Demo不是emo  主页面链接:主页传送门 创作初心ÿ...