angular2集成ng2-bootstrap

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用法，请看这里。