Angular 开发NPM第三方包

步骤:

创建第三方包 》 开发第三方包 》 测试第三方包 》 发布第三方包 》 使用第三方包

实例:

第一步:创建第三方包;; (创建项目,项目下创建第三方库)

1. 新建项目

ng new zerolibrary

2. 创建第三方库

// 目录切换至新创建的项目
cd zerolibrary

// 创建第三方库 (--prefix: 前缀;在用命令行新建组件/指令时,selector的属性值的前缀)
ng g library zero --prefix zm

=== >目录结构 (多了projects目录)

第二步:开发第三方包;;(在第三方库中新建组件、模块)

1. 第三方库中新建button组件

// 切换至第三方库创建组件的位置
cd projects/zero/src/lib

// 新建组件
ng g c button

====> 目录结构

2. 第三方库的模块中导出新建组件,可供外部模块使用

// zero.module.ts
exports: [ButtonComponent]

第三步:测试第三方包;;;(本地测试第三方包中模块、组件是否可用)

1. app.module.ts中导入第三方包的模块文件

// 配置app.module.ts
imports: [ZeroModule]

2. app.component.html中使用第三方包的ButtonComponent组件

<zm-buttom></zm-button>

3. 浏览器访问localhost:4201

第四步:发布第三方包;;;(npm测试无问题,发布)

1. 构建npm包

// 切换至第三方包根目录下
cd projects/zero
// 构建
ng build zero

====>目录结构 (多了dist目录)

2. 发布至npm官网

// 需要登录(npm login),有自己的npm账号
npm publish


第五步:使用第三方包;;;(别的项目使用自己新建发布的NPM包)

1. 项目中安装

npm install [email protected] --save

2. 在需要使用NPM包的模块中引入NPM包模块

imports: [ZeroModule]

3. 在组件中使用即可

<zm-button></zm-buttom>

发布过程中的问题:

npm ERR! publish Failed PUT 403

原因一: 当前电脑所使用的npm源未在npm官网上

解决: nrm use npm ,然后再publish

原因二: 该npm包已经在共有npm网站上存在了

解决:更改package.json文件中的“name”值,然后再publish

原文地址:https://www.cnblogs.com/zero-zm/p/9932304.html

时间: 2024-08-02 18:34:37

Angular 开发NPM第三方包的相关文章

开发发布npm module包

开发发布npm module包 问题 在项目开发过程中,每当进入一个新的业务项目,从零开始搭建一套前端项目结构是一件让人头疼的事情,就要重新复制一个上一个项目的前端框架和组件代码库.其中很多功能的模块组件都要重复拷贝,可以统一将这些组件类的模块统一打包上传至npm,以后每次都只需要install一下就可以了. 前期准备工作 安装nodejs github上新建一个repository用于托管组件代码 新建一个npm账户用于发布包 这里以工具组件库中的时间格式转换工具为例,主要用于对Date时间进

npm 通过package.json来安装第三方包

通过package.json来安装第三方包 将package.json文件拷贝到项目,在当前目录打开命令行 安装: npm install --production 原文地址:https://www.cnblogs.com/tutumissed/p/8276221.html

【使用JBoss 7开发Java EE 6】EJB引用第三方包

在EJB里引用了第三方包后,必须在JBoss里进行这个包的配置,否则项目肯定会部署失败. 在JBoss7以前的版本里,这些第三包可以放到%JBOSS_HOME%/common/lib下面,但JBoss 7与以前的版本完全不同了.JBoss 7里使用的是模块加载,第三方Jar包也会当成模块来加载,所以需要在JBoss 7里对第三方Jar包进行配置. 配置分为两个步骤,一个是在modules这个文件夹里以包层次作为文件夹名,最后一级是版本号,没有则为main,如示例: package calcula

Angular 开发环境搭建

Angular 开发环境搭建 1 安装node.js 可以直接去官网https://nodejs.org/en/ 下载: 目的:使用npm 管理项目依赖的软件包: 在cmd 中敲入 npm –version 查看版本号看是否安装成功 2 由于 npm 会自动访问海外的服务器,由于网络的原因,可以使用cnpm yarn 作为替代的包管理工具: cnpm 是淘宝发布的一款工具,会自动把 npm 上面的所有包定时同步到国内的服务器上来,cnpm 本身也是一款 NodeJS 模块. http://npm

iOS开发-常用第三方开源框架介绍(你了解的ios只是冰山一角)

iOS开发-常用第三方开源框架介绍(你了解的ios只是冰山一角) 2015-04-05 15:25 2482人阅读 评论(1) 收藏 举报开源框架 图像: 1.图片浏览控件MWPhotoBrowser       实现了一个照片浏览器类似 iOS 自带的相册应用,可显示来自手机的图片或者是网络图片,可自动从网络下载图片并进行缓存.可对图片进行缩放等操作.      下载:https://github.com/mwaterfall/MWPhotoBrowser目前比较活跃的社区仍旧是Github,

iOS开发-常用第三方开源框架介绍

iOS开发-常用第三方开源框架介绍 图像: 1.图片浏览控件MWPhotoBrowser 实现了一个照片浏览器类似 iOS 自带的相册应用,可显示来自手机的图片或者是网络图片,可自动从网络下载图片并进行缓存.可对图片进行缩放等操作. 下载:https://github.com/mwaterfall/MWPhotoBrowser 目前比较活跃的社区仍旧是Github,除此以外也有一些不错的库散落在Google Code.SourceForge等地方.由于Github社区太过主流,这里主要介绍一下G

python django -6 常用的第三方包或工具

常用的第三方包或工具 富文本编辑器 缓存 全文检索 celery 布署 富文本编辑器 借助富文本编辑器,管理员能够编辑出来一个包含html的页面,从而页面的显示效果,可以由管理员定义,而不用完全依赖于前期开发人员 此处以tinymce为例,其它富文本编辑器的使用可以自行学习 下载安装 在网站pypi网站搜索并下载"django-tinymce-2.4.0" 解压 tar zxvf django-tinymce-2.4.0.tar.gz 进入解压后的目录,工作在虚拟环境,安装 pytho

android开发过程中引用第三方包

关于android开发中使用第三方jar包问题: 一般都是打包好的jar包,那么拷贝到工程下面的libs包下面即可. 如果还是源码有两种方法导入: 方法一: 点击项目右键  点击properties  快捷键Alt+Enter 然后选择android  然后在右下方选择add  然后选择需要导入的jar包   当然源码包必须保证勾选了is library  (勾选方法:右键项目-android  中间偏下有个单选框,选择就是表示这个项目工程是作为第三方包) 导入图: 导入成功: 然后点击Appl

在项目中安装第三方包-虚拟环境

1. 创建虚拟环境 (1)安装虚拟环境 linux: pip3 install virtualenv pip3 install virtualenvwrapper   [虚拟环境的工具包] windows: pip3 install virtualenv (2)virtualenv的基本使用 Linux: Windows: 创建虚拟环境:virtualenv venv 指定python解释器:virtualenv -p "....\python.exe" venv 激活虚拟环境:act