详解如何为你的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 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
模拟多级复选框效果的jquery代码
Aug 13 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
javascript搜索框效果实现方法
May 14 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
讲解vue-router之什么是编程式路由
May 28 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
layui实现显示数据表格、搜索和修改功能示例
Jun 03 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 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
提取HTML标签
2006/10/09 PHP
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
第二节--PHP5 的对象模型
2006/11/16 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
PHP count()函数讲解
2019/02/03 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
Angular实现form自动布局
2016/01/28 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
工程部经理岗位职责
2013/12/08 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
员工安全承诺书
2014/05/22 职场文书
社区服务活动小结
2014/07/08 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
昆虫记读书笔记
2015/06/26 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
bat批处理之字符串操作的实现
2022/03/16 Python