如何在角度2中使用引导程序4？

使用Angular CLI添加Bootstrap：

step 1. npm i bootstrap@latest --save 
step 2. open angular.json and then add bootstrap:
 "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.scss"
    ]
step 3. restart the server to see the changes
        ng serve 

在角度6中：首先在项目目录中安装bootstrap npm install bootstrap。如果查看Angular.JSON文件，将会看到styles.css已经被引用，因此在styles.css中只需添加@import "~bootstrap/dist/css/bootstrap.css";

在angular 6中不要使用npm i bootstrap @ next --save可能会起作用，但是有时添加它们并不会更好：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>

ng addAngular 6中已引入。要安装Bootstrap 4（ng-bootstrap 2.0.0）

ng add @ng-bootstrap/schematics

不要忘记使用重启应用ng serve。

要使用任何需要JQuery的可视库，只需执行以下操作：

• 在索引中添加库css；
• 将jquery js文件添加到索引；
• 在索引中添加库js文件；
• 安装库定义文件（d.ts）；
• 安装jquery定义文件（d.ts）；

如果该库没有定义文件，则可以：

• 自己创建定义；
• 创建一个与库对象同名的全局any变量，只是为了避免出现编译器错误。
• 有错误使用（这是最糟糕的选择）；

现在您可以在Typescript中使用该库了；

我会建议：

• 只需在页面中包含指向Bootstrap的CSS文件的链接index.html
• 使用ng-bootstrap-专用的Angular 2指令集，用于需要动态行为的零件。这样，您无需导入/设置jQuery，也无需关心Bootstrap的JavaScript。

Angular2 CLI的Bootstrap4 alpha（也适用于Angular4 CLI）

如果您使用angular2 cli / angular 4 cli，请执行以下操作：

npm i bootstrap@next --save

这会将引导程序4添加到您的项目中。

接下来转到您的src/style.scss或src/style.css文件并在其中导入引导程序：

对于style.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

对于style.scss

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

如果您使用的是scss，请确保在以下位置将默认样式更改为scss .angular-cli.json：

  "defaults": {
    "styleExt": "scss",
    "component": {}
  }

Bootstrap JS Components

For Bootstrap JS components to work you will still need to import bootstrap.js into .angular-cli.json under scripts (this should happen automatically):

...     
"scripts": ["../node_modules/jquery/dist/jquery.js",
                  "../node_modules/tether/dist/js/tether.js",
                  "../node_modules/bootstrap/dist/js/bootstrap.js"],
...

Update 2017/09/13: Boostrap 4 Beta is now using popper.js instead of tether.js. So depending on which version you are using import either tether.js (alpha) or popper.js (beta) in your scripts. Thanks for the heads up @MinorThreat