Angular4引入第三方庫，以jQuery爲例

若是咱們想在Angular中使用第三方的庫，好比jquery或bootstrap等，該若是作呢？

       首先咱們先來看看package.json，這個文件列出了項目所使用的第三方依賴包。咱們在建立新項目的時候默認會給咱們下載一些包，這些是Angular自帶的，存放在node_modules目錄中。

dependencies和devDependencies。

devDependencies 裏面的插件只用於開發環境，不用於生產環境，而 dependencies 是須要發佈到生產環境的。

Angular引入jQuery

若是咱們想使用jquery的話，咱們就須要將jquery包下載到node_modules中，而後引入js文件便可。

命令： npm install name --save / --save--dev
       咱們能夠經過npm install name –save這個命令去添加依賴。注意，要在項目的根目錄下執行該命令。
npm install jquery --save

--save與--save-dev的區別

–-save 就是將要安裝的依賴寫到package.json的dependencies 對象中去
–-save-dev是將要安裝的依賴寫到package.json的devDependencies 對象中去

       能夠看到，一開始dependencies中是沒有jquery的，經過 npm install jquery --save命令會自動下載jquery並添加到dependencies中。而後咱們會發現node_modules目錄中就有jquery的包了。

修改angular-cli.json文件

在apps中能夠看到styles數組和scripts數組。

1. styles中就是咱們要引入的css
2. scripts中就是咱們要引入的js

       下載的jQuery包是放在node_modules目錄中的,經過設置scripts的值爲jQuery包的路徑來引入它；

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

安裝類型描述文件

Angular以TypeScript語言做爲默認編碼語言，而jquery本質是javascript，TypeScript是不能直接使用的。

       完成上面的步驟後，這時咱們還不能直接使用jquery，還須要先安裝類型描述文件，讓TypeScript認識jquery。
命令：npm install @types/name --save / --save-dev

npm install @types/jquery --save-dev

若是在安裝過程當中因爲網速和牆的緣由致使進度緩慢，能夠使用國內淘寶鏡像

npm config set registry https://registry.npm.taobao.org