angular4添加第三方库

很多在使用angular的开发人员都想在项目中引入自己熟悉的第三方库

下面是使用第三方库的几种方法

1、如果第三方库提供了npm包，可以使用

npm install xxx --save

将依赖包安装在项目的node_modules目录下

如果是css文件需要在angular-cli.json中的styles引入

"styles": ["../node_modules/第三方库/css/xxx.css"
]

如引入jquery

npm install jquery --save

在angular-cli.json中的scripts引入

"scripts": ["../node_modules/jquery/dist/jquery.js"
]

这个时候我们直接在项目中使用$或者jQuery编译时会报错 

ERROR in G:/angular/wjsh/src/app/app.component.ts (61,5): Cannot find name '$'.

这是因为angular使用了Typescript，此时它还不认识 $ 和 jQuery 符号，我们需要在 typing.d.ts中写入

declare var $: any;

此时可以在项目中使用$或jQuery了，如果此时还报错的话，你可能需要重新npm start一次

2、我们可以将下载的第三方库的文件放到assets目录下面，如果是css文件，则可以在index.html的head部分通过link引入

然后直接在index.html文件的body结束标签前面通过script标签引入script文件

当然，你也需要在typing.d.ts中写入

declare var $: any;

其他库的使用方法基本上是一样的。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！