1. 程式人生 > >Angular 引入第三方類庫bootstrap和jQuery

Angular 引入第三方類庫bootstrap和jQuery

Angular專案引入第三方類庫

1.首先開啟Node.js command prompt,進入Node.js 命令列

2.cd到專案資料夾下。

3.下載bootstrap和jQuery

npm install jQuery -save

npm install bootstrap -save

下載成功後,第三方類庫包儲存在開發環境的node_modules目錄下,而且在package.json中會增加相應的配置命令

4.在專案中引入第三方類庫

開啟angular.json  找到build中的styles和scripts

.. 的意思是返回上級路徑

在styles中新增  “../node_modules/bootstrap/dist/css/bootstrap.css”

在scripts中新增 ”../node_modules/bootstrap/dist/js/bootstrap.js”

“../node_modules/jquery/dist/jquery.js”

這裡新增stryles的是bootstrap中css檔案的相對路徑

scripts新增的是jQuery和bootstrap中js檔案的相對路徑

通常大部分都是上面的寫法。

但是我的這樣

這樣第三方類庫就配置完成了。

5.安裝bootstrap和jQuery的型別描述檔案

npm install @types/jquery -–save-dev

npm install @types/bootstrap --save-dev

這樣就可以在typescript中呼叫jquery和bootstrap裡面的相關內容