在angualr4中年引入ng-bootstrap_angular ng-bootstrap-优快云博客

本文链接：https://blog.youkuaiyun.com/lys613yangpeng/article/details/78373970

这篇博客主要针对Angular4，讲述了在更新快速的Angular环境中，如何正确引入ng-bootstrap。博主指出网上许多教程已过时，分享了自己经过实践验证的无坑方法，包括使用@angular/cli创建项目，修改app.module.ts以及在style.css中添加特定代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<h1>注意本教程只适用于angular4</h1>

<h2>虽然网上也有很多教程，我也按着好几个教程做了多遍，但都不对，可能是angular更新太快，导致很多教程已经不能用了，总之一路都是坑，我摸索了很久得出一个可行的方案，希望小伙伴们都能避免入坑</h2>

<p>ng-bootstrap应该是针对angular4设计的，和官方快速搭建angular脚手架@angular/cli是对应的，所以请<b>按如下步骤导入ng-bootstrap<b></p>

<h2>1.用 npm install -g @angular/cli 安装angualr4<h2>

<h2>2.用

npm install --save @ng-bootstrap/ng-bootstrap

导入ng-bootstrap<h2>

<h2>3.在你的工程里的app.module.ts中添加红色框里的内容<h2>

<h2>4.在工程里的/src/assets下添加一个bootstrap/bootstrap.min.css,如图<h2>

<h2>5.最后在工程里的style.css文件下，添加这句代码：

 
 @import 
 "assets/bootstrap/bootstrap.min.css"; 

<h2>

<h2>到这里就结束了，你可以用如下代码验证一下是否引入成功：

 
  < 
  p 
  > 
 
 
  < 
  ngb-alert [ 
  dismissible]= 
  "false" 
  > 
 
 
  < 
  strong 
  >Warning! 
  </ 
  strong 
  > Better check yourself, you're not looking too good. 
 
 
  </ 
  ngb-alert 
  > 
 
 
  </ 
  p 
  > 
 

把这段代码放在你的组件的html模板中</h2>