Angular 开发NPM第三方包

最新推荐文章于 2024-05-02 16:26:38 发布
最新推荐文章于 2024-05-02 16:26:38 发布
阅读量564 收藏
点赞数
文章标签： angular.js npm 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54944506/article/details/129719252
版权

准备工作

  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

无敌喜之郎
关注
angular7封装组件上传到npm库，并引用到项目上
aggie707的博客
03-23 2281
angular7上传包到npm库 一、创建angular项目和组件 ng new myFirstDemo //angular-cli新建项目 ng g m component //新建模块 ng g c component/drop-down //新建组件 //提示：组件必须在模块里的module.ts或者组件里的module.ts声明和导出 @NgModule({ imports: [ ...
编写Angular第三方包发布npm
moqiuqin的博客
03-21 441
创建好项目之后执行命令 // --prefix: 是选择器的前缀，例如ng默认的app前缀，可以不要 ng g library zh-rate --prefix zh 执行以上命令之后自动生成文件夹：projects，文件夹下有一些配好的文件 此时进入到projects文件夹下的lib目录中找到你的组件进行编写，和编写正常的ng代码一样，要注意的是，如果报了一些指令没法用的问题，比如ngSty...
Angular组件的创建 打包npm包的流程
alize的博客
06-29 987
大体流程是先建一个组件的仓库，仓库开发完成后build到dist中，然后打包发布。 1. ng g library 仓库名 --prefix=selector的前缀 比如：ng g library search-form --prefix=ytxx 2.开发仓库 第一步之后已经在项目根目录下建好了projects文件夹，在projects下有刚刚自己新建的仓库。 lib下边就是我们操作的地方了，写好组件以后在module中把组件export出来，不然不能通过selector使用组件。public-api.
Angular环境搭建 （npm常用命令）
lvxinaidou的博客
11-17 1614
@Angular环境搭建 1. 下载并且安装Node.js 官方网站下载：https://nodejs.org/en/ 安装angular的计算机上面必须安装最新的nodejs–注意安装nodejs稳定版本 1.1 npm包全局安装和局部安装理解 1. 全局安装 npm所在位置，安装位子： 全局安装是将npm包安装在你的node安装目录下的node_modules文件夹中。npm是Node.js的包管理工具，所以当我们从官网下载安装node的时候，npm也顺带装好了。 npm安装在node安装目录下的no
AngularJS包
04-23
angularjs类库包，里面有3个文件，angularjs、angularjs-animate、angularjs-route
angular nodejs npm
power0405hf的专栏
02-12 691
http://blog.csdn.net/daihuimaozideren/article/details/78566757 不过没把cnpm设为global： 没写这句： ng set --global packageManager=cnpm ng new AngularTest 进入项目后(cd AngularTest) ng serve 默认4200 写的很棒的入门小作品...
angular第三方包开发整理(小结)
08-27
这篇文章将带你走过构建Angular第三方包的整个流程，从零开始搭建、本地测试、发布到npm或yarn，以及如何在普通Angular应用中引入和使用。 1. **从空白开始搭建Angular第三方包** 创建一个Angular第三方库并不复杂...
Angular-CLI指南：构建并发布NPM第三方包
2. 创建第三方包：在项目根目录下，切换到项目文件夹`cd PROJECT_NAME`。接下来，使用`ng g library`生成一个库，如`ng g library LIBRARY_NAME --prefix PREFIX`。这里的`LIBRARY_NAME`是你想要的包名，比如`zorro`...
Angular第三方包开发：从零到发布
"angular第三方包开发整理(小结)" 在Angular框架中开发第三方库是一个涉及到多个步骤的过程，包括项目的初始化、依赖管理、包的构建与发布，以及如何在其他Angular应用中正确引用和使用这些库。以下是对这个过程的...
npm创建angular项目
weixin_30834019的博客
08-30 758
1、首先保证你本地的 node 环境 是ok的哦。 2、安装 angular-cli 命令 npm install -g @angular/cli。安装完成后，ng version 查看版本，我的是 3、到你自己想要的文件路径下，创建 命令，ng new <自己定义的名字> 等它成功 就阔以了 转载于:https://www.c...
angular发布npm包
qq_38872934的博客
07-11 628
1.注册npm账号 方法一：登录npm官网注册； 方法二：终端命令行注册npm adduser； 2.终端登录npm账号 npm login 3.终端发布npm包 npm publish 4.删除发布的npm包 npm unpublish xxx@0.0.1 --force 5.发布可能遇到的错误 错误一：401 Unauthorized，一般是没有登录，或者登录源与发包目标源不一样导致的。解决方...
angualr创建npm并打包
hua_ban_yu的博客
05-08 618
在使用angular开发项目的时候，有些东西为了方便调用和单独管理，需要把部分组件通过npm封装进行调用，那如何使用创建组件并打包为npm可以调用的呢？步骤如下： 一、创建厂库 1. 打开终端命令面板，输入命令创建一个项目为createLib ng new createLib 2. 使用前端开发工具打开新建的 createLib 项目 3. 开发厂库 使用以下命令创建厂库，厂库在项目根目录下名字为projects的文件夹，在projects下有刚刚自己新建的仓库 ng ..
从Java角度理解Angular之入门篇：npm, yarn, Angular CLI
The Beauty of Software
01-22 2892
本系列从Java程序员的角度，带大家理解前端Angular框架。 本文是入门篇。笔者认为亲自动手写代码做实验，是最有效最扎实的学习途径，而搭建开发环境是学习一门新技术最需要先学会的技能，是入门的前提。 作为入门篇，本文重点介绍Angular的开发、编译工具：npm, yarn, Angular CLI，它们就像Java在中的Maven，同时顺便介绍一些Angular的概念。学习之后，希望你能够
Angular CLI 安装
热门推荐
松门一枝花
05-23 1万+
安装Angular 官网的教程，因为国内网络环境原因，访问不了服务器，导致安装失败。 1、先安装NodeJs 安装教程：http://blog.csdn.net/zengmingen/article/details/72650484 2、通过NodeJs中的模块npm 命令行安装 CLI 2.1、设置npm的资源库为国内淘宝的。 命令： npm config set r
发布Angular 模块 到 npm
qq_33484961的博客
09-30 773
来源：https://blog.csdn.net/yiershan1314/article/details/79999726 这一段时间一直在写自己的组件 就突发奇想把这些组件放到npm库上去。所以找来资料学习并记录一下 生成package.json npm init -y 生成一个package.json文件 内容如下 { "name": "npm", "version":...
npm和angular_如何开发，使用和发布Angular库到NPM
cumi6497的博客
08-04 181
npm和angularby Omer Kalim Ansari 通过Omer Kalim Ansari 如何开发，使用和发布Angular库到NPM…但是有时不值得！ (How to develop, consume, and publish an Angular library to NPM… but sometimes its not Worth it!) Angular is a rea...
Angular基础-搭建Angular运行环境
最新发布
踏雨歌青春，诗酒趁年华
05-02 6961
这篇文章介绍了在Angular项目中进行开发环境搭建的关键步骤。包括node.js安装和配置、安装Angular CLI工具、安装angular-router、创建Angular项目等步骤。这篇文章为读者提供了清晰的指南，帮助他们快速搭建Angular开发环境，为后续的项目开发奠定基础。
在npm发布angular9组件 和 删除npm包
weixin_38566677的博客
03-03 948
环境：angular9.0.2 npm6.13.7 参考地址博客： npm 使用（创建，上传，删除) Angular 开发NPM第三方包 创建一个项目 ng new my-ng-project [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P8Lu91sT-1583206731354)(%E5%89%8D%E7%AB%AF%E4%BA%8B%E9%A1%B...
angular2 npm start 报错
powderhose的博客
08-14 2072
C:\Users\Administrator\Desktop\bus_zhang\angular-quickstart2>npm start > angular-quickstart@1.0.1 start C:\Users\Administrator\Desktop\bus_zhang\angula r-quickstart2 > tsc && concurrently "npm
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值