Angular引入第三方庫

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

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

須要注意的是： 
package.json中有dependencies對象和devDependencies。 
devDependencies 裏面的插件只用於開發環境，不用於生產環境，而 dependencies 是須要發佈到生產環境的。

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

添加依賴的方法： npm install name –save

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

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

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

在目錄詳解那篇博客中咱們講到，.angular-cli.json這個文件是 Angular命令行工具的配置文件。後期可能會去修改它，引一些其餘的第三方的包 好比jquery等

那麼如今咱們就須要去修改angular-cli.json這個文件。 
咱們在apps這個中能夠看到styles數組和scripts數組。

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

引入jquery 
首先咱們要知道要引入文件的路徑。jquery包是放在node_modules目錄中的。

而後將路徑添加到scripts中去便可。 

這個時候咱們還不能直接使用jquery，由於Angular是使用TypeScript語言開發的，而jquery本質是javascript，TypeScript是不能直接使用的。咱們須要先安裝類型描述文件，讓TypeScript認識jquery。

安裝類型描述文件 
經過命令：npm install @types/name –save-dev

這裏演示的是jquery的類型描述文件的安裝：npm install @types/jquery –save-dev 
類型描述文件安裝到開發環境便可

安裝完成後，修改tsconfig.app.json文件，將jquery添加到types數組中。

而後，咱們就可以使用jquery啦！

咱們來測試一下。 
首先，在模板頁面上添加一個按鈕 

而後在控制器中寫一個簡單的點擊按鈕彈出文字

ok,下面咱們來啓動項目看看。 

能夠看到，jquery能夠正常使用了。

添加其它第三方依賴包的方法也是相似。

若是你以爲本文對你有幫助，麻煩動動手指頂一下，算是對本文的一個承認。也能夠關注我web前端的博客專欄，我會不按期的更新，若是文中有什麼錯誤的地方，還望指正，謝謝！