1、檢查@angular/cli版本
命令行ng -v ，版本號必須大於1.0.0-beta.24
2、新建工程
工程所在目錄，命令行ng new my-app --style=scss 帶style參數原因：ng-bootstrap要求使用scss
3、安裝bootstrap
cd my-app 進入工程目錄
cnpm install @ng-bootstrap/ng-bootstrap bootstrap@next --save 安裝ng-bootstrap和bootstrap
4、添加bootstrap.min.css引用
工程目錄下，打開.angular-cli.json文件，在styles中添加bootstrap.min.css引用
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css", 此行為新添加
"styles.scss"
]
5、src目錄下，新建_variables.scss文件
6、在styles.scss文件中添加如下內容
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';
7、/src/index.html文件中添加使用BS4標記
<body>
<!-- Enable bootstrap 4 theme -->
<script>window.__theme = 'bs4';</script>
<app-root> </app-root>
</body>
8、AppModule類中引用NgbModule
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
imports: [
NgbModule.forRoot()
],
})
export class AppModule { }
9、添加模板
在app.component.html中添加如下內容
<p>
<ngb-alert type="success" [dismissible]="false">
<strong>Success!</strong> Good work.
</ngb-alert>
</p>
10、驗證
工程目錄下，命令行cnpm start啟動工程，瀏覽器中查看結果