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引入

 <link rel="stylesheet" href="第三方/css/xxx.css">

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

<script src="assets/jquery/dist/jquery.js"></script>

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

declare var $: any;

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