编写Angular第三方包发布npm

最新推荐文章于 2023-04-05 21:02:58 发布
最新推荐文章于 2023-04-05 21:02:58 发布
阅读量419 收藏 1
点赞数 1
分类专栏： Angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/moqiuqin/article/details/104932647
版权

创建好一个angular项目之后执行命令

// --prefix: 是设定选择器的前缀，例如ng默认的app前缀，如果不设置会自动添加默认值
ng g library zh-rate --prefix zh

执行以上命令之后自动生成文件夹：projects，文件夹下有一些配好的文件，可以发现里面有些文件和一些博文手动创建相应文件一样，因此最好直接通过命令生成这个文件夹，省得出现一些莫名其妙的错误
在这里插入图片描述
此时进入到projects文件夹下的lib目录中找到你的组件进行编写，和编写正常的ng代码一样，要注意的是，如果报了一些指令没法用的问题，比如ngStyle报错，那么手动导入CommonModule,BrowserModule这两个模块。

编写好之后可以自己先测试能不能正常使用，直接在appModule里引入然后使用，能正常使用说明组件没问题
在这里插入图片描述

最低0.47元/天 解锁文章
不要葱花
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
发布Angular 模块 到 npm
qq_33484961的博客
09-30 748
来源：https://blog.csdn.net/yiershan1314/article/details/79999726 这一段时间一直在写自己的组件 就突发奇想把这些组件放到npm库上去。所以找来资料学习并记录一下 生成package.json npm init -y 生成一个package.json文件 内容如下 { "name": "npm", "version":...
angular7封装组件上传到npm库，并引用到项目上
01-08
angular7上传包到npm库 一、创建angular项目和组件 ng new myFirstDemo //angular-cli新建项目 ng g m component //新建模块 ng g c component/drop-down //新建组件 //提示：必须在组件里的drop-down.module.ts声明和导出 @NgModule({ imports: [ CommonModule ], declarations: [DropDownComponent], exports: [DropDownComponent] //新添加的部分 }) 二、安
angular发布npm包
qq_38872934的博客
07-11 585
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，一般是没有登录，或者登录源与发包目标源不一样导致的。解决方...
Angular 开发NPM第三方包
weixin_30376083的博客
11-08 198
步骤： 创建第三方包 》 开发第三方包 》 测试第三方包 》 发布第三方包 》 使用第三方包 实例: 第一步：创建第三方包;; (创建项目，项目下创建第三方库) 1. 新建项目 ng new zerolibrary 2. 创建第三方库 // 目录切换至新创建的项目 cd zerolibrary // 创建第三方库 (--prefix: 前缀；在用命令行新建组件/指令时，selector的属性...
如何发布angular模块到npm
Litwak
04-17 1095
发布angular npm包流程发布后的项目发布过程新的项目新建library实现功能配置编译发布到NPM注册然后在终端输入发布使用InstallUseexample 发布后的项目 这是我第一次创建npm包，实现了clone-deep功能(clone-deep不需要创建angular module， 项目仅做测试学习)。 发布过程 新的项目 ng new angular-clone-deep ...
angular第三方包开发整理(小结)
08-27
本篇文章主要介绍了angular第三方包开发整理(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解如何构建一个Angular6的第三方npm包
10-18
主要介绍了详解如何构建一个Angular6的第三方npm包,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用typescript开发angular模块并发布npm包
01-21
本文介绍了使用typescript开发angular模块并发布npm包，分享给大家，具体如下： 创建模块 初始化package.json文件 执行命名 npm init -y 会自动生成package.json文件如下，name默认为文件夹名称 { name: MZC-...
发布一个npm包
maid_04的博客
07-26 308
> 去npm官网注册一个npm账号 > 切换到要发布包的根目录，然后输入命令行添加账号：npm adduser > 创建一个node模块：node init > 发布npm包：npm publish 过程中我遇到了错误码为403的错，原因是需要到邮箱去验证一下才能发布公共依赖...
封装Angular 组件 并发布到 npm
yinyueyu007的博客
02-25 648
创建项目 ng new yhCascade 2. 创建第三方库 // 切换目录 cd yhCascade ng g library zero --prefix zm 3. 开发第三方包 cd projects\cascade\src\lib <yh-cascade></yh-cascade> 4.第四部 发布 // 切换至第三方包根目录下 cd projects/cascade // 构建 ng build cascade 5. 登录npm // 需要登录(npm l.
使用typescript开发angular模块(发布npm包)
易兒善
04-19 2615
创建模块 初始化package.json文件 执行命名 npm init -y 会自动生成package.json文件如下，name默认为文件夹名称 { "name": "MZC-Ng-Api", "version": "1.0.0", "description": "", "main": "index.js",
发布一个npm包——以angular为例
qq_38164763的博客
02-23 334
一、前言   做前端的同学和npm打交道的次数可不算少，npm上有许多好用的库可以帮我们节省很多时间，那么今天我们就尝试发布一个angular组件到npm上。 二、创建项目   首先，我们来创建一个angular项目，不同于平时我们使用 ng new app   来创建项目，我们本次使用 ng new angular-npm --createApplication=false   来创建我们的...
Angular5发布npm的方法
Darion的博客
07-02 450
Angular10已发布，但为了发布兼容angular5的老项目的npm包，只能考虑使用老版本的angular进行发布，以前少各种不必要的问题。（试用Angular9发布，但引入Angular5项目中后，报错） 1、创建应用，并在app目录下添加my-lib-modules（自定义）文件夹，在文件夹内创建test.module(名称自定义)，在test.module下添加component，并添加在exports中 import { NgModule } from '@angular/core'; i
Angular 打包 npm
qq_40876059的博客
05-21 854
1.创建工作区 ng new xxxx --create-application=false xxxx为项目名 2.进入项目新建library cd xxxx ng g library my-lib --prefix=ml 3.编译 ng build my-lib 4.编译后会生成dist文件，进入dist文件 cd dist cd my-lib 5.打包 npm pack ...
Angular创建自己的库发布到npm上使用
lvxinaidou的博客
04-05 812
注意，一定要修改paths，否则模块引入会报错的。具体代码（有第三方组件一定要应用module）可以修改html的前缀。使用自己定义的html。
Angular类库打包，npm发布到Nexus私有库
chuxu3954的博客
09-04 547
Angular打包自己的类库，本质上是npm范畴内的职责，所以实际上就是npm publish进行发布。 npm publish 发布到npm仓库，当然也有官方仓库和私有仓库两种。 说说私有仓库： Nexus搭建npm私有仓库。 Nexus需要启用npm的realm：!...
Angular添加自定义属性并绑定一个变量
moqiuqin的博客
08-07 7425
Angular中如果使用自定义属性时使用的是H5添加的方式，那么有一个问题是，自定义属性的值是固定不变的，也就是不能绑定变量，比如下面的方式 <a href="javascript:void(0)" *ngFor="let item of images, let i=index" (click)="locationImage(i)" data-index="i" #dots&...
Angular获取当前激活路由与监听路由
moqiuqin的博客
08-02 6202
Angualr获取当前激活路由可以通过PlatformLocation和Router获取，还有一说Location也可以，看名字估计是没问题的。这里就写前面两个，PlatformLocation这个包来自@angular/common，Router来自@angular/router constructor( private route:Router, private planfor...
Angular动态表单使用
moqiuqin的博客
08-08 3313
使用动态表单目的就是不用去手动编写太多的HTML代码，设置好之后就由数据的多少以及类型来动态生成表单，提高效率。在Angular的官网中介绍动态表单时，夹杂了一些业务方面的东西，增加了不熟悉的人学习的难度，这里直接就是为了演示怎么产生和使用动态表单。 使用动态表单时，有可能需要input类型、textarea类型或者其他表单类型等，在拿到数据构建相关控件时，需要制定一些基本的东西，比如控件类型、值...
编写angular代码
最新发布
06-14
以下是一个简单的 Angular 组件的代码示例： ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-hello-world', template: ` <h1>Hello {{name}}! <p>Today is {{today |...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不要葱花

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值