2个简单步骤

安装引导程序(正在安装最新版本)

npm install bootstrap@next

导入到你的项目中，在你的styles.scss中添加下面这行

@import '~bootstrap';

请注意您的导入顺序可能会有影响，如果您有其他库使用bootstrap，请将此import语句放在顶部

最后。：）

注:以下是我的版本

Angular: 9

节点:v10.16.0

NPM: 6.9.1

如果你刚刚开始使用angular和bootstrap，那么简单的答案将如下步骤: 1. 添加节点包引导作为开发依赖

npm install --save bootstrap

在angular中导入引导样式表。json文件。 “风格”:( “项目/ app / src / styles.scss”, ”。/ node_modules /引导/ dist / css / bootstrap.min.css” ), 你已经准备好使用bootstrap进行样式化、网格化等。 >我的第一个bootstrap div</div>

我发现最好的部分是我们使用引导，没有任何第三方模块依赖。只要更新npm install——save bootstrap@4.4等命令，我们就可以随时升级引导程序。

使用npm安装引导程序 NPM安装引导

2.安装Popper.js

npm install --save popper.js

3.转向角。Angular 6 project / . Angular -cli. json。在Angular 5中添加json，并添加列出的:

 "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.css",
          "src/styles.css"
        ],

        "scripts": [
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

我猜上面的方法在发布后已经改变了，看看这个链接

https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md

启动项目

npm i -g angular-cli
ng new my-app
cd my-app
ng serve
npm install --save @ng-bootstrap/ng-bootstrap

安装ng-bootstrap和bootstrap

npm install ng2-bootstrap bootstrap --save

src / app / app.module开放。Ts和add

import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
   ...
   imports: [AlertModule, ... ],
    ... 
})

angular-cli开放。并在样式数组中插入一个新条目

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],

打开src/app/app.component.html并通过添加测试所有工作

<alert type="success">hello</alert>

由于这变得如此令人困惑，这里的答案完全是混合的，我只是建议与官方ui团队为BS4回购(是的，NG-Bootstrap有很多这样的回购。

只需按照此处的说明https://github.com/ng-bootstrap/ng-bootstrap获取BS4。

摘自图书馆:

这个库是由ui-bootstrap团队从头构建的。我们 正在使用TypeScript并瞄准Bootstrap 4 CSS框架。 与Bootstrap 4一样，这个库正在进行中。请检查 列出我们的问题列表，以查看我们正在实现的所有事情。感觉 在那里可以自由发表评论。

只是为了它的目的而复制粘贴:

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

安装完成后，你需要导入我们的主模块:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

剩下的惟一部分是在应用程序模块中列出导入的模块。对于根模块(顶级)，确切的方法会略有不同，你最终应该得到类似于(注意NgbModule.forRoot())的代码:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

应用程序中的其他模块可以简单地导入NgbModule:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...], 
})
export class OtherModule {
}

这似乎是迄今为止最一致的行为

一个使用angular-cli的工作示例:

npm i bootstrap-schematics
ng generate bootstrap-shell -c bootstrap-schematics -v 4
npm install

适用于css和scss。引导程序v3和v4可用。

更多关于引导原理图的信息请在这里找到。