angular 4 引用 bootstrap 4 記錄總結

 

正確的做法 很簡單 直接引用

1.先放文件 bootstrap  css 和js文件到 assets文件夾下 目錄結構如紅框里的

2.angular-cli.json 配置 bootstrap css 和js路徑

D:\wamp\angular4\xxx\.angular-cli.json

路徑是相對於index.html來說的

"styles": [
"styles.css",
"assets/css/bootstrap.css"
],
"scripts": [
"assets/js/bootstrap.js"
],

測試npm run build 是否可以打包 看起來是沒有問題

 

 

---

 以下方式暫時沒有通過實測

后續有時間再來研究

 

1.安裝bootstarp

D:\wamp\angular4\xxx>npm install --save bootstrap

　　

2.angular-cli.json 文件內添加 css 和js

D:\wamp\angular4\xxx\.angular-cli.json

"styles": [
"styles.css",
"../assets/css/bootstrap.css"
],
"scripts": [
"../assets/js/bootstrap.js"
],

 

 

 

3.安裝ng-bootstarp

D:\wamp\angular4\xxx>npm install --save @ng-bootstrap/ng-bootstrap

　

 

　4.app.module.ts 導入bootstrap 

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

　　

D:\wamp\angular4\xxx\src\app\app.module.ts

 

 

這里的問題就是 打包不可以 總是提示 找不到bootstrap.js

Error: ENOENT: no such file or directory, open 'D:\wamp\angular4\xxx\assets\js\bootstrap.js'

 

參考資料：

https://stackoverflow.com/questions/43557321/angular-4-how-to-include-bootstrap