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 中引用第三库,整理总结到此为止,如有错处,望指出,感激不尽!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • JavaScript 模块化编程 网站越来越复杂,js代码、js文件也越来越多,会遇到什么问题? 命名冲突; 文件...
    magic_pill阅读 5,353评论 0 1
  • gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器;它不仅能对网站资源进行优化,而且在开发过...
    西城在此阅读 3,233评论 0 0
  • 本文内容基于 npm 4.0.5 概述 npm (node package manager),即 node 包管理...
    静默虚空阅读 6,586评论 0 8
  • 周末难得老公不上班,昨晚一家三口出去吃饭了,因为是周末,心情不错,正好都放松放松,吃完饭去了超市,买了一点儿子喜欢...
    李宇航妈妈阅读 1,157评论 0 0
  • 世间的罪恶几乎总是由愚昧无知造成,如果缺乏理解,好心能造成和恶意同样大的危害。 ——加缪《鼠疫》
    扫花者阅读 1,166评论 0 1

友情链接更多精彩内容