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