[Angular2] 在angular-cli專案加入第三方套件-以jQuery及Bootstrap為例

前言

接觸angular後其實真的很少寫jQuery，但很多時候拿到的html版可能是UI設計師所提供的，或者是花錢買的樣板，所以免不了要用jQuery寫入一些效果，本篇就簡單介紹一些如何在angular-cli專案加入第三方的.js .css.
如何建立範本請參考 [Angular2] 建立專案範本

webpack

angular2是個模組化的開發方式，透過angular-cli所建置的專案已改由system.js改由webpack，以往要在angular2專案加入webpack，你必需要去了解webpack的建置環境，這對於一個全端工程師來說是個很焦慮的事XD，因為webpack要懂得的東西還真的不少，好在angular-cli已幫我們整合好，只要懂得用他的指令即可，而angular-cli相關webpack設定檔都至於node_modules底下，而webpack本身還有許多額外的套件，如果要增加的話不建議直接改node_modules這些設定檔，可在專案底下加入會比較彈性一點。

angular.cli.json
webpack會將我們相依的程式及模組打包成一隻.js減少request，而以下就介紹如何在專案下加入jQuery及bootstrap
先用yarn將jQuery及bootstrap安裝回來

# yarm是完全相依npm的套件管理工具，執行上比npm快非常多，可參考此篇文章

$ yarn add jQuery bootstrap
package.json

在angular.cli.json 加入路徑
"styles": [
           "styles.css",
           "../node_modules/bootstrap/dist/css/bootstrap.min.css"
       ],
       "scripts": [
           "../node_modules/jquery/dist/jquery.min.js"
],
接著我們app.component.html加入一個bootstrap的Button (強烈建議編輯器要安裝snippet套件快速開發)

ng serve 啟動本機伺服器 可以看到已套用bootstrap

接著在app.component.ts加入jQuery試試

這時你會發現 $ 字號有毛毛蟲 這是因為Typescript是強行別的開發方式，檢查會變得較為嚴謹，任何開發尚未定義的變數都會在編譯時期就出錯。
而要讓Typescript看得懂 $ 字號為jQuery其實只要宣告一下就好了：

declare var $:any;

TypeScript With jQuery

而宣告成any還不夠帥，且每支檔案都要宣告一次還挺麻煩的，我們可以將此宣告移到一個全域的地方，

並且載入Typescript的jQuery設定檔定義檔，讓開發起來更順手

安裝jQuery Typescript定義檔:

$ yarn add @types/jquery

找到src/tsconfig.js，有關Typescript的設定都會在這檔案，加入types

"types": [
         "jquery"
     ]
接著回到app.componet.ts，會看到有關jQuery語法都開始會有智慧提示功能 (VS Code Rock!!)

在執行一次ng serve，即可看到jQuery正常執行

原則上Typescript用第三方函示庫就要有相對應的.d.ts定義檔，如果該函示庫如果沒有定義檔也可以自行製作一個
可參考保哥的教學影片 https://www.youtube.com/watch?v=_9fUQus6EqQ
或者是可以考慮在src/typings.d.ts進行全域的宣告也可
--
本次範例程式 : https://github.com/kyleap/angular-learn-sample