Angular-Cli中引用第三方库
最近在学习angular(AngularJS 2),根据教程使用angular-cli新建项目,
然而在添加JQuery和Bootstrap第三方库时遇到了问题...
初试
我最初的想法是直接将相对路径写到index.html
即可,如下:
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" />
<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来将模块打包,
我们这里配置的scripts
和styles
会被打包成scripts.bundle.js
和styles.bundle.js
文件加载到前台页面,而后就阔以正常使用这些第三方库了~~~
参考链接:
http://stackoverflow.com/questions/38855891/angular-cli-webpack-how-to-add-or-bundle-external-js-files
https://www.sitepoint.com/ultimate-angular-cli-reference/
Angular-Cli中引用第三方库的更多相关文章
- VC中引用第三方库,常见的库冲突问题
Q:VC中引用第三方库,常见的库冲突问题 环境:[1]VS2008 [2]WinXP SP3 A1(方法一): [S1]第三方库(Binary形式的)如果同主程序冲突,则下载第三方库的源码[S2]保持 ...
- VS中引用第三方库的方法(配置sqlite数据库)
我们在编写程序时,,不可避免的会使用第三方的库文件,很少使用源文件(.cpp),大部分是使用对类进行声明的头文件和封装了类的链接库(静态lib或动态dll),比如我们写程序用的iostream这个库, ...
- Flutter如何引用第三方库并使用
Flutter如何引用第三方库并使用 https://www.jianshu.com/p/bbda7794345e Flutter官网点击访问Flutter教程(一)Flutter概览Flutter教 ...
- Android Studio中导入第三方库
之前开发Android都是使用的eclipse,近期因为和外国朋友Timothy一起开发一款应用,他是从WP平台刚切换使用Android的,使用的开发环境时Android Studio,为了便于项目的 ...
- xcode中的第三方库配置问题总结
xcode中的第三方库配置总结 在导入第三方库的时候,总是会遇到许多的问题.在这里,我记录一下学到的一些知识点.写得比较乱.只要是想要记录下来,在第三方库导入的时候,遇到的一些问题. 参考网址: ht ...
- Android中集成第三方库的方法和问题
Android中集成第三方库的方法和问题 声明: 1. 本文參考了网上同学们的现有成果,在此表示感谢,參考资料在文后有链接. 2. 本文的重点在第三部分,是在开发中遇到的问题及解决的方法.第一,第二部 ...
- 【Android Studio安装部署系列】十七、Android studio引用第三方库、jar、so、arr文件
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 在Android开发过程,经常需要用到第三方库以及jar.so.arr文件,那么如何引用到项目中呢?下面简单介绍下. 引用第三方库 ...
- IOS 编程中引用第三方的方类库的方法及常见问题
方法一:直接复制全部源文件到项目中 这样的方法就是把第三方类库的全部源文件拷贝到项目中,直接把全部.h和.m文件拖到XCode项目中就可以. 注意: 1. 假设第三方类库引用了一些系统自带类库,那么在 ...
- ThinkPHP引用第三方库
Thinkphp引用第三方库的方法例如引用购物车:在项目Home目录下,新建一个文件夹(以下是我自己的demo) Tool文件夹,在Tool文件夹中创建Tool.class.php文件.这个和你控制器 ...
随机推荐
- 关于verilog中的signed类型
在数字电路中,出于应用的需要,我们可以使用无符号数,即包括0及整数的集合:也可以使用有符号数,即包括0和正负数的集合.在更加复杂的系统中,也许这两种类型的数,我们都会用到. 有符号数通常以2的补码形式 ...
- C/S与B/S 区别以及优缺点
1.什么是C/S结构 C/S (Client/Server)结构,即客户机和服务器结构.它是软件系统体系结构,通过它可以充分利用两端硬件环境的优势,将任务合理分配到Client端和Server端来实现 ...
- 【转】odoo学习之:Environment
Environment类提供了对ORM对象的封装,同时提供了对注册类的访问,记录集的缓存,以及管理重计算的数据结构. 对于继承了Model的类来说可以直接通过self.env对Environment进 ...
- 【原创】Odoo开发文档学习之:构建接口扩展(Building Interface Extensions)(边Google翻译边学习)
构建接口扩展(Building Interface Extensions) 本指南是关于为Odoo的web客户创建模块. 要创建有Odoo的网站,请参见建立网站;要添加业务功能或扩展Odoo的现有业务 ...
- treetable--.net webform中树形table表管理的应用
好记性不如烂笔头. treetable 官网:http://ludo.cubicphuse.nl/jquery-treetable/#api 今天要做一个关于table的树节点展示,还有编辑,删除功能 ...
- OKVIS(一)初始化流程及代码结构
OKVIS代码结构: okvis_apps: your own app okvis_ceres: backend main code, estimator, error term; okvis_co ...
- SpringBoot入门(二)——起步依赖
本文来自网易云社区 在前一篇我们通过简单几步操作就生成了一个可以直接运行的Web程序,这是因为SpringBoot代替我们做了许多工作,概括来讲可以分为起步依赖和自动配置.这一篇先来看看起步依赖. 项 ...
- Ruby 基础教程1-5
1.条件语句 if unless case unless和if相反,条件不成立则执行 2.条件 除了 false和nil 其他都是true 3.unless 语法 ...
- hdu1045Fire Net(经典dfs)
Fire Net Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...
- 【转】unity3d 在UGUI中制作自适应调整大小的滚动布局控件
转自 http://blog.csdn.net/rcfalcon/article/details/43459387 在游戏中,我们很多地方需要用到scroll content的概念:我们需要一个容器, ...