1、通过angular-cli创建项目
ng new my-app
2、加入bootstrap,ng2-bootstrap包
npm install ng2-bootstrap bootstrap@next --save
这里使用@next引用bootstrap4
3、引入bootstrap样式文件
打开src下的styles.css在其中加入以下代码，样式导入语法请看这里：
@import url('../node_modules/bootstrap/dist/css/bootstrap.css');
在官方文档里说是在angular-cli.json下加入以下代码：
"styles": ["styles.css","../node_modules/bootstrap/dist/css/bootstrap.min.css"],
但是经过我测试，始终没有效果，原文请看这里
我这里是angular-cli版本如下：
angular-cli: 1.0.0-beta.24
node: 6.9.1
os: darwin x64
@angular/common: 2.4.2
@angular/compiler: 2.4.2
@angular/core: 2.4.2
@angular/forms: 2.4.2
@angular/http: 2.4.2
@angular/platform-browser: 2.4.2
@angular/platform-browser-dynamic: 2.4.2
@angular/router: 3.4.2
@angular/compiler-cli: 2.4.2
4、编码
打开src/app/app.module.ts加入以下代码：
import{AlertModule}from'ng2-bootstrap';
...
@NgModule({
...
imports: [AlertModule.forRoot(),...],
...
})
打开src/app/app.component.html加入以下代码：
<alert type="success">hello</alert>
5、运行
ng serve
在浏览器里运行http://localhost:4200查看效果
总结：
1、当时看着官方文档，只想着在angular-cli.json中加入styles数组，但是一直都没有效果，这是个坑啊，具体为何，不知。
2、在这里虽然能查看出效果，但是在safari中会报找不到bootstrap.css.map文件（404），通过ng build --prod，然后使用http-server运行，问题解决。
http-server用法，请看这里。
