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

准备工作

  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

相关内容

热门资讯

玛雅人的五大预言 玛雅人预言2... 曾经玛雅人预言2012年是世界末日,但当时好像没有发生什么。没想到10年后的2022年,疫情,战争,...
长白山自助游攻略 吉林长白山游... 昨天介绍了西坡的景点详细请看链接:一个人的旅行,据说能看到长白山天池全凭运气,您的运气如何?今日介绍...
cad打印线条粗细设置 cad... 004-线型(下)打印样式设置和线型文件使用一、线宽设置方法制图规范里边的线宽要求,我们已经定义好,...
阿西吧是什么意思 阿西吧相当于... 即使你没有受到过任何外语培训,你也懂四国语言。汉语:你好英语:Shit韩语:阿西吧(아,씨발! )日...
世界上最漂亮的人 世界上最漂亮... 此前在某网上,选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中,人们投票选出了心目中最美...