最近在学习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来将模块打包,

我们这里配置的scriptsstyles会被打包成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中引用第三方库的更多相关文章

  1. VC中引用第三方库,常见的库冲突问题

    Q:VC中引用第三方库,常见的库冲突问题 环境:[1]VS2008 [2]WinXP SP3 A1(方法一): [S1]第三方库(Binary形式的)如果同主程序冲突,则下载第三方库的源码[S2]保持 ...

  2. VS中引用第三方库的方法(配置sqlite数据库)

    我们在编写程序时,,不可避免的会使用第三方的库文件,很少使用源文件(.cpp),大部分是使用对类进行声明的头文件和封装了类的链接库(静态lib或动态dll),比如我们写程序用的iostream这个库, ...

  3. Flutter如何引用第三方库并使用

    Flutter如何引用第三方库并使用 https://www.jianshu.com/p/bbda7794345e Flutter官网点击访问Flutter教程(一)Flutter概览Flutter教 ...

  4. Android Studio中导入第三方库

    之前开发Android都是使用的eclipse,近期因为和外国朋友Timothy一起开发一款应用,他是从WP平台刚切换使用Android的,使用的开发环境时Android Studio,为了便于项目的 ...

  5. xcode中的第三方库配置问题总结

    xcode中的第三方库配置总结 在导入第三方库的时候,总是会遇到许多的问题.在这里,我记录一下学到的一些知识点.写得比较乱.只要是想要记录下来,在第三方库导入的时候,遇到的一些问题. 参考网址: ht ...

  6. Android中集成第三方库的方法和问题

    Android中集成第三方库的方法和问题 声明: 1. 本文參考了网上同学们的现有成果,在此表示感谢,參考资料在文后有链接. 2. 本文的重点在第三部分,是在开发中遇到的问题及解决的方法.第一,第二部 ...

  7. 【Android Studio安装部署系列】十七、Android studio引用第三方库、jar、so、arr文件

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 在Android开发过程,经常需要用到第三方库以及jar.so.arr文件,那么如何引用到项目中呢?下面简单介绍下. 引用第三方库 ...

  8. IOS 编程中引用第三方的方类库的方法及常见问题

    方法一:直接复制全部源文件到项目中 这样的方法就是把第三方类库的全部源文件拷贝到项目中,直接把全部.h和.m文件拖到XCode项目中就可以. 注意: 1. 假设第三方类库引用了一些系统自带类库,那么在 ...

  9. ThinkPHP引用第三方库

    Thinkphp引用第三方库的方法例如引用购物车:在项目Home目录下,新建一个文件夹(以下是我自己的demo) Tool文件夹,在Tool文件夹中创建Tool.class.php文件.这个和你控制器 ...

随机推荐

  1. 关于verilog中的signed类型

    在数字电路中,出于应用的需要,我们可以使用无符号数,即包括0及整数的集合:也可以使用有符号数,即包括0和正负数的集合.在更加复杂的系统中,也许这两种类型的数,我们都会用到. 有符号数通常以2的补码形式 ...

  2. C/S与B/S 区别以及优缺点

    1.什么是C/S结构 C/S (Client/Server)结构,即客户机和服务器结构.它是软件系统体系结构,通过它可以充分利用两端硬件环境的优势,将任务合理分配到Client端和Server端来实现 ...

  3. 【转】odoo学习之:Environment

    Environment类提供了对ORM对象的封装,同时提供了对注册类的访问,记录集的缓存,以及管理重计算的数据结构. 对于继承了Model的类来说可以直接通过self.env对Environment进 ...

  4. 【原创】Odoo开发文档学习之:构建接口扩展(Building Interface Extensions)(边Google翻译边学习)

    构建接口扩展(Building Interface Extensions) 本指南是关于为Odoo的web客户创建模块. 要创建有Odoo的网站,请参见建立网站;要添加业务功能或扩展Odoo的现有业务 ...

  5. treetable--.net webform中树形table表管理的应用

    好记性不如烂笔头. treetable 官网:http://ludo.cubicphuse.nl/jquery-treetable/#api 今天要做一个关于table的树节点展示,还有编辑,删除功能 ...

  6. OKVIS(一)初始化流程及代码结构

    OKVIS代码结构: okvis_apps: your own app okvis_ceres: backend main code, estimator, error term;  okvis_co ...

  7. SpringBoot入门(二)——起步依赖

    本文来自网易云社区 在前一篇我们通过简单几步操作就生成了一个可以直接运行的Web程序,这是因为SpringBoot代替我们做了许多工作,概括来讲可以分为起步依赖和自动配置.这一篇先来看看起步依赖. 项 ...

  8. Ruby 基础教程1-5

    1.条件语句 if unless case        unless和if相反,条件不成立则执行   2.条件  除了 false和nil 其他都是true   3.unless 语法        ...

  9. hdu1045Fire Net(经典dfs)

    Fire Net Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  10. 【转】unity3d 在UGUI中制作自适应调整大小的滚动布局控件

    转自 http://blog.csdn.net/rcfalcon/article/details/43459387 在游戏中,我们很多地方需要用到scroll content的概念:我们需要一个容器, ...