最近在学习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. Celery的基本使用

    Celery 1.什么是Celery Celery是一个简单.灵活且可靠的,处理大量消息的分布式系统,专注于实时处理的异步任务队列,同时也支持任务调度. 用Python写的执行 定时任务和异步任务的框 ...

  2. JZ2440开发板:UART(串口)使用(学习笔记)

    查看UART在硬件上的信息,阅读JZ2440原理图可以看到: JZ2440开发板的UART0是可以跟USB相接的,用于打印调试,UART1,UART2两个串口用来外接模块.所以本文仅对UART0进行操 ...

  3. 【8086汇编-Day5】第二次实验

    debug的使用 偷个懒,之前写过了这里不再赘述 实验 1)实验1 要求:用e将一些数据写入内存,用a写入一段程序,t 逐条执行 观察具体参数变化,并探究现象 1.e写入,d检查 2.a写入程序 3. ...

  4. ov5640介绍

    1 摄像头 在各类信息中,图像含有最丰富的信息,作为机器视觉领域的核心部件,摄像头被广泛地应用在安防.探险以及车牌检测等场合.摄像头按输出信号的类型来看可以分为数字摄像头和模拟摄像头,按照摄像头图像传 ...

  5. FPGA学习之路——PLL的使用

    锁相环(PLL)主要用于频率综合,使用一个 PLL 可以从一个输入时钟信号生成多个时钟信号. PLL 内部的功能框图如下图所示: 在ISE中新建一个PLL的IP核,设置四个输出时钟,分别为25MHz. ...

  6. EL/JSTL-jsp页面更简单的输出方式

    1.EL(Expression Language):表达式语言,用于页面输出 格式:${表达式} EL支持四则运算,关系运算[常用eq来比较字符串或判断相等],逻辑运算 EL访问空间内对象,[类.对象 ...

  7. BZOJ3293_分金币_KEY

    题目传送门 设x[i]表示i+1向i传的糖果数,x[n]表示1向n传的糖果数,a'=(a[1]+...a[N])/N a[1]+x[1]−x[n]=a' a[2]+x[2]−x[1]=a' a[3]+ ...

  8. 聊聊WS-Federation(test)

    本文来自网易云社区 单点登录(Single Sign On),简称为 SSO,目前已经被大家所熟知.简单的说, 就是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统. 举例: 我们 ...

  9. 微信小程序之基础案例详细解释

    这是案例的初始页面 首先关于这个案例上面的app.json做一个特别详细的解释 首先提醒一下.json文件不能有注释,因此如果要复制的话,请把注释删去 //关于app.json详细学习 { //pag ...

  10. linux学习总结----mongoDB总结

    dbhelper.py 用户登录和注册(加密算法) 加密导包 import hashlib 或者使用Md5 加密 MongoDB ->JSON service mysql start servi ...