详解Angular-Cli中引用第三方库


Posted in Javascript onMay 21, 2017

最近在学习angular(AngularJS 2),根据教程使用angular-cli新建项目,然而在添加JQuery和Bootstrap第三方库时遇到了问题...

初试

我最初的想法是直接将相对路径写到index.html即可,如下:

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" />
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"/>
<script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.min.js"/>

然鹅。。。并不好使,浏览器抓包会显示请求

 http://localhost:4200/node_modules/juqery/dist/jquery.min.js返回404错误,bootstrap也是相同的问题,这里显然是路径不正确,我的项目目录结构如下:

angular-form/
 |- src/
 | |- app/
 | |- index.html
 | ...
 |- node_modules
 | |- jquery/
 | |- bootstrap/
 | ...

其中,网站运行时的根目录是src目录,

所以获取不到与其处在同一目录的node_modules目录下文件也在情理之中...

另辟蹊径

经过乱七八糟的查找...发现了可以在/.angular-cli.json文件中配置脚本引用,

在其app.scripts下配置要添加的脚本, 并在app.styles下配置要添加的样式文件:

"app": [
 {
  ...
  "styles": [
   "node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
   "node_modules/bootstrap/dist/css/bootstrap.min.css",
   "node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  ...
 }
]

再次启动网站,却连编译都无法通过...出现如下问题:

ERROR in multi script-loader!./src/~/jquery/dist/jquery.min.js script-loader!./src/~/bootstrap/dist/js/bootstrap.min.js
Module not found: Error: Can't resolve 'E:\Code\JavaScript\angular2\angular-forms\src\node_modules\jquery\dist\jquery.min.js' in 'E:\Code\JavaScript\angular2\angular-forms'
 @ multi script-loader!./src/~/jquery/dist/jquery.min.js script-loader!./src/~/bootstrap/dist/js/bootstrap.min.js

可以看出这里去加载js脚本时寻找的是src/目录下的node_modules目录, 所以加载失败。这意味着angular-cli.json文件中配置的路径时相对于网站根目录的路径, 接着做如下更改:

"app": [
 {
  ...
  "styles": [
   "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
   "../node_modules/bootstrap/dist/css/bootstrap.min.css",
   "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  ...
 }
]

再次运行网站,成功加载~~~

回看来时路

后来了解到,angular-cli的项目使用webpack来将模块打包, 我们这里配置的scriptsstyles会被打包成scripts.bundle.js styles.bundle.js文件加载到前台页面,而后就可以正常使用这些第三方库了~~~

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

Javascript 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
List Installed Software Features
Jun 11 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
JavaScript中10个Reduce常用场景技巧
Jun 21 Javascript
Angular2安装angular-cli
May 21 #Javascript
Angular2使用Augury来调试Angular2程序
May 21 #Javascript
Angular2使用Angular-CLI快速搭建工程(二)
May 21 #Javascript
Angular2使用Angular CLI快速搭建工程(一)
May 21 #Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 #jQuery
node.js 中间件express-session使用详解
May 20 #Javascript
JS 调试中常见的报错问题解决方法
May 20 #Javascript
You might like
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
js实现筛选功能
2020/11/24 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
python 使用get_argument获取url query参数
2017/04/28 Python
python的socket编程入门
2018/01/29 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
python实现浪漫的烟花秀
2019/01/30 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
语文教育专业应届生求职信
2013/11/23 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
2014年度党员自我评议
2014/09/13 职场文书
工程承包协议书
2014/10/20 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL