Angular 引入第三方库

2017-11-09

如果我们在开发Angular应用的时候想使用第三方的库，比如jQuery或bootstrap等，该如何去引入并使用呢？
主要通过三步：

1、下载

1 2	$ npm install jquery –-save-dev $ npm install bootstrap –-save-dev

打开，package.json 文件，你会发现列出的依赖中加上了 jquery，bootstrap。

2、引入

打开.angular-cli.json这个文件，可以看到 app 中有个styles数组和scripts数组。
“styles”里面存放要引入的css
“scripts”里面存放要引入的js

要引入第三方的包，首先要知道引入文件的路径，下载的这些包，会存放在node_modules目录中。找到路径，写入scripts中。

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

3、安装类型描述文件

因为Angular是使用TypeScript语言开发的，而jquery本质是JavaScript，TypeScript是不能直接使用的。
我们需要先安装类型描述文件，让TypeScript认识jquery。

1 2	$ npm install @types/jquery -–save-dev $ npm install @types/bootstrap -–save-dev

4、小结

最后，讲一下，我在安装过程中遇到的巨坑。

安装完 jquery类型描述文件之后，运行一直报错，江山一片红，出现如下提示：

ERROR in C:/Users/yanling.zhong/data-center/node_modules/@types/bootstrap/index.
d.ts (114,32): Generic type 'JQuery<TElement, HTMLElement>' requires 2 type argu
ment(s).
ERROR in C:/Users/yanling.zhong/data-center/node_modules/@types/bootstrap/index.
d.ts (116,42): Generic type 'JQuery<TElement, HTMLElement>' requires 2 type argu
ment(s).
ERROR in C:/Users/yanling.zhong/data-center/node_modules/@types/bootstrap/index.
d.ts (117,32): Generic type 'JQuery<TElement, HTMLElement>' requires 2 type argu
ment(s).
ERROR in C:/Users/yanling.zhong/data-center/node_modules/@types/bootstrap/index.
d.ts (119,44): Generic type 'JQuery<TElement, HTMLElement>' requires 2 type argu
ment(s).
ERROR in C:/Users/yanling.zhong/data-center/node_modules/@types/bootstrap/index.
d.ts (121,36): Generic type 'JQuery<TElement, HTMLElement>' requires 2 type argu
ment(s).

找了很久发现是 @types/jquery 的版本问题，默认安装的是3.2.6版本。
现在安装2.0.39版本

1	$ npm install @types/jquery@2.0.39 -–save-dev

再运行，没有问题了。