详解如何为你的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 相关文章推荐
jQuery ui 1.7更新小结
Aug 15 Javascript
js有序数组的连接问题
Oct 01 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 Javascript
node 标准输入流和输出流代码实例
Sep 19 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
Python字符串和文件操作常用函数分析
2015/04/08 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
python实现飞行棋游戏
2020/02/05 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
工厂门卫岗位职责
2013/11/25 职场文书
支部鉴定材料
2014/06/02 职场文书
关于随地扔垃圾的检讨书
2014/09/30 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android