【angular2】引入jquery及Bootstrap第三方库

我们在使用angular2的时候难免不会遇到引入其他库的情况，比如一些UI库之类的。下面记录下如何引入jquery和bootstrap。

1、使用angular-cli工具先初始化一个项目框架(至于怎么搭建angular2的环境，请参看 官方文档)，比如我的项目名为： demo。
这里有个坑需要提一下：
我们使用angular-cli初始化项目前需要安装好git工具（这里下载），并且将git.exe配置到环境变量中，否则会导致angular-cli在构建的过程中卡死
例如：

项目创建时间有点长，耐心等待，构建完毕后，目录结构大致如下：

2、使用命令行进入刚刚创建好的工程目录（我的目录是:G:\\angular2\demos）.

cd angular2/demos

3、安装jquery库。(–save表示自动向目录下的package.json中添加依赖申明)

npm install jquery --save

4、安装Bootstrap库。

npm install bootstrap --save。

两个都安装完毕后，我们打开demos下的package.json，查看增加了两行依赖，如下：

5、这时候，我们打开目录下的 node_modules 目录，能找得到两个文件夹，分别是jquery和bootstrap。我们需要将jquery和bootstrap的库添加到 .angular-cli.json 中。我们打开目录下的 .angular-cli.json文件，在styles和scripts中添加上代码（其中style.css是原来就有的）。

"styles": [
"styles.css",
 "../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
 "../node_modules/jquery/dist/jquery.min.js",
 "../node_modules/bootstrap/dist/js/bootstrap.min.js"
],

例如：

6、最后一步，我们为typeScript添加上类型申明库。

// 添加这个是为了让typeScript认识$符号
npm install @types/jquery --save-dev

// 添加上bootstrap的申明
npm install @types/bootstrap --save-dev

运行完毕后，我们可以看到目录下的package.json中的devDependencies多了两行申明。如下：

至此，我们的库添加完毕。