Angular4.0引入第三方框架，eg: bootstrap、jquery

    最近學習angular4.0，在練習是須要使用jquery和bootstrap。可是查閱了，大多數都是angular2的方法，或者是angular4.0的方法可是不許確。花了一些時間終於搗騰出來了，把使用的方法分享給你們。進入正題，angular導入第三方框架幾乎都是一個套路。拿jquery和bootstrap（bootstrap依賴於jquery，因此使用bootstrap必須在jquery的基礎之上）舉例：

    一、node環境、cnpm淘寶鏡像、angular cli、以及搭建好的angular4.0項目這些前提條件很少說，不懂的能夠自行百度，資料不少；

    二、在對應的項目目錄下執行： cnpm i jquery -- save

                                                cnpm i bootstrap --save

         執行完後，在package.json文件裏面的dependencies能夠查看jquery和bootstrap的版本信息：

                

    三、因爲angular是使用TypeScript，因此還需安裝對應的類型描述模塊，是TypeScript認識jquery和bootstrap的語法。執行如下命令安裝：

              cnpm i @types/jquery --save-dev

             cnpm i @types/bootstrap --save-dev

          執行完後，在package.json文件裏面的devdependencies能夠查看jquery和bootstrap的類型描述模塊版本信息：

                    

    四、好！如今已經安裝好了，可是你會發現爲啥頁面中的樣式並無bootstrap的效果？那是由於咱們只是安裝了，可是並無引入相關的js和css：在.angular-cli.json文件中的apps下的styles和scripts裏分別寫入：

                                                             "../node_modules/_bootstrap@3.3.7@bootstrap/dist/css/bootstrap.min.css",                    

                                                       "../node_modules/_jquery@3.2.1@jquery/dist/jquery.js",
                                                        "../node_modules/_bootstrap@3.3.7@bootstrap/dist/js/bootstrap.min.js"

      像這樣：

                   

 

      值得注意的是這裏的_bootstrap@3.3.7@bootstrap這個位置（可能直接寫：bootstrap；緣由不明）。

    五、最容易被忽略也是最重要的一步！！！重啓項目！！！