Angular中引用第三方库

有些库有typescript声明文件，有export就可以用import导入，没有的话可以使用页面引入的方式或者angular.json文件配置的方式配合declear const name的方式使用

如果我们想在Angular中使用第三方的库，比如jquery或bootstrap等，该如果做呢？有两种方法

一、npm install name

通过npm install ${name} --save 安装在node_modules目录下，package.json中的dependencies会配置正式环境所依赖的库。

• –save 就是将要安装的依赖写到package.json的dependencies 对象中去

• –save-dev是将要安装的依赖写到package.json的devDependencies 对象中去
  

  我们来看看package.json这个文件，package.json这个文件列出了项目所使用的第三方依赖包。
  image.png

使用npm下载的依赖包，再导入使用时，用import name from '包名'，

然而并不是所有的安装包都可以使用import导入，有一些旧的安装包，或者其他原因，这个包没有typescript声明文件，没有export，我们就不能用import 导入，可以使用第二种方法

二、index.html页面导入，或者angular.json 种配置

在页面直接引用和在angular.json 配置路径没有什么区别，都是项目启动，根据路径拉去到对应的JS文件并执行，然后在全局产生了一个声明，然后在项目种使用declare const 声明可以找到

这里我简单说一下怎么配置angular.json，页面引入就不说了

angular.json这个文件是 Angular命令行工具的配置文件。引一些其他的第三方的包 比如jquery等，那么现在我们就需要去修改angular.json这个文件。

我们在architect这个中可以看到styles数组和scripts数组
styles中就是我们要引入的css
scripts中就是我们要引入的js

angular.json文件

ng4+的新版已经不需要类型描述文件了

在angular.json 中配置了路径后，当项目启动，项目会跑到angular.json文件中根据路径拉取文件，当路径文件被执行，在全局会有一个$声明

image.png

image.png

image.png

这个时候已经可以使用JQ了

其他第三方库也是类似，主要分为两种，有无typescript声明文件

Angular 中引用第三库，整理总结到此为止，如有错处，望指出，感激不尽！