详解如何为你的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 相关文章推荐
Javascript 定时器调用传递参数的方法
Nov 12 Javascript
JavaScript 未结束的字符串常量常见解决方法
Jan 24 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
微信小程序身份证验证方法实现详解
Jun 28 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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
php下通过POST还是GET来传值
2008/06/05 PHP
php 全文搜索和替换的实现代码
2008/07/29 PHP
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
2009/09/01 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
js实现列表按字母排序
2020/08/11 Javascript
python optparse模块使用实例
2015/04/09 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
Python hashlib模块用法实例分析
2018/06/12 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
服装发布会策划方案
2014/05/22 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang