這邊單純做一個筆記，一般直接從bootstrap網站下載好，再加入連結到專案內也可以，
只是Angular 4提供了另外的方法可以使用，這邊做一個紀錄，之後方便查詢使用。
1. 透過npm 安裝bootstrap
開啟terminate，切換路徑到Angular專案內，透過以下指令安裝bootstrap：
npm install --save bootstrap
--save參數會將bootstrap加入dependency內，跑完後可以在
node_module下找到bootstrap目錄，同時在package.json內的dependency內加入bootstrap設定。
2. 將bootstrap加入 .angular-cli.json
接著在Angular目錄下找到.angular-cli.json，在styles陣列內，加入bootstrap css路徑：
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
]
這樣就可以在Angular 4內使用bootstrap了，相當方便。
這邊另外補充，可以注意到.angular.cli內裡面有styles與scripts設定，其傳入型態都是陣列，styles目的是放入額外的css，scripts就是放入額外之javascript lib，所以如果要使用bootstrap js，則是在scripts內加入bootstrap js 路徑
這邊陣列內容是依序載入，如果有dependency的情況，像上面是bootstrap js 需要使用到tether.js，所以就要放在bootstrap.js前面，這樣才確保載入bootstrap js時不會因為缺少tether js而出現錯誤
而scripts當然也不局限於node_modules內的javascript，也可以是其他目錄的javascript，統一在.angular-cli.json上加入即可。
這邊另外補充，可以注意到.angular.cli內裡面有styles與scripts設定，其傳入型態都是陣列，styles目的是放入額外的css，scripts就是放入額外之javascript lib，所以如果要使用bootstrap js，則是在scripts內加入bootstrap js 路徑
"scripts": [
"../node_modules/tether/dist/js/tether.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
這邊陣列內容是依序載入，如果有dependency的情況，像上面是bootstrap js 需要使用到tether.js，所以就要放在bootstrap.js前面，這樣才確保載入bootstrap js時不會因為缺少tether js而出現錯誤
而scripts當然也不局限於node_modules內的javascript，也可以是其他目錄的javascript，統一在.angular-cli.json上加入即可。
沒有留言:
張貼留言