详解如何为你的angular app构建一个第三方库


Posted in Javascript onDecember 07, 2018

Angular 团队 在 angular6 中,使得创建 Angular 第三方库变得更为简单。如果你以前尝试过操作,你会发现其实不是很简单!

那么流程是什么呢?

首页我们构建一个搭建一个简单的环境,环境里面包含一些组件和服务以及一些接口。

创建项目

1.按照官方教程,使用 ng new 命令初始化项目:

ng new lib-demo --prefix ld

在 angular-cli 第6个之后版本。配置文件的方式发生了相当大变化, angular.json 现在代表 angular 工作空间,

详解如何为你的angular app构建一个第三方库

你可以可以使用 ng generate application [my-app-name] 命令添加更多项目

你也可以通过 ng generate 指令创建一个公共库。

ng generate library tvmaze --prefix tm

当然你可以使用简写命令

ng g lib tvmaze --prefix tm

具体参照

使用 generate 在我们 angular.json 中添加一个项目。

详解如何为你的angular app构建一个第三方库

在库中创建一个服务

我们会发现tvmaze有它自己的 package.jsontsconfig.jsontslint.jsonkarma.conf.js ,这样建立是有原因的,因为这个项目独立与主应用建立而成,它本身也有组件、服务、模块。稍后我们添加其他的内容。现在我们添加一些逻辑:

详解如何为你的angular app构建一个第三方库

这里说明下 provideIn: rootangular6 之后的新属性,详情见官网;如果是为了打包优化。

在库中创建一个组件

我们使用 angular-cli 来创建一个组件

# 使用--project 指定创建在那个工程中
ng generate component poster --project=tvmaze

然后这样编辑

详解如何为你的angular app构建一个第三方库

将组件注册到 TvmazeModule 中,并且 exports 中是的外部能够访问,还得添加 CommonModule , HttpClientModule 两个模块。

详解如何为你的angular app构建一个第三方库

构建一下

在我们使用之前,我们先构建一下,我们 ng build 构建,指定项目。

ng build tvmaze

使用库

接下来,我们来使用刚刚构建好的库,一般我们采用第三方库都是使用 import 来导入。

详解如何为你的angular app构建一个第三方库

我们会发现库不存在。因为这种方式,它是从 node_modules 寻找,所以我们要在根目录下 tsconfig.json 添加 paths

详解如何为你的angular app构建一个第三方库

接下来我们在主项目中运用:使用 <tm-poster> 标签,即可完成

详解如何为你的angular app构建一个第三方库

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
JSQL 批量图片切换的实现代码
May 05 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
标准的js无缝滚动效果
Aug 30 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
Vuex的实战使用详解
Oct 31 Javascript
vue路由缓存的几种实现方式小结
Feb 02 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 #Javascript
angular学习之动态创建表单的方法
Dec 07 #Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 #Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 #Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 #Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 #Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 #Javascript
You might like
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
python开发之for循环操作实例详解
2015/11/12 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
Python----数据预处理代码实例
2019/03/20 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
趣味运动会广播稿
2015/08/19 职场文书
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技