详解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 相关文章推荐
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
js实现div弹出层的方法
Nov 20 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
Nov 03 Javascript
基于angular实现树形二级表格
Oct 16 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 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
Javascript验证方法大全
2015/09/21 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
vue中监听返回键问题
2019/08/28 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
Python高效编程技巧
2013/01/07 Python
python数据结构之列表和元组的详解
2017/09/23 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
悦木之源美国官网:Origins美国
2016/08/01 全球购物
Java程序员面试题
2013/07/15 面试题
小学教育毕业生自荐信
2013/11/18 职场文书
管理专员自荐信
2014/01/26 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
疾病证明书
2015/06/19 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers