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

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>

2020年8月更新:Angular 10

“如果你有一个Angular≥9的CLI项目，你可以简单地使用我们的原理图来添加ng-bootstrap库。”只需在项目文件夹中运行以下命令。所有配置都会自动添加。

的添加@ng-bootstrap/of-bootstrap

ng s

示例代码片段:

import {Component} from '@angular/core';

@Component({selector: 'ngbd-alert-basic', templateUrl: './alert-basic.html'})
export class NgbdAlertBasic {
}

< p > < ngb-alert(驳回)= " false " > < >强警告!你最好检查一下自己，你看起来不太好。 < / ngb-alert > < / p >

查找关键字>全局库安装 https://github.com/angular/angular-cli会帮助你找到答案。

根据他们的文档，您可以执行以下步骤来添加Bootstrap库。

首先，从npm安装Bootstrap:

npm install bootstrap

然后将所需的脚本文件添加到应用程序[0]中。angular中的脚本。json文件:

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

以上步骤对于某些功能(如显示下拉菜单)的工作很重要。

最后将Bootstrap CSS文件添加到应用程序[0]。样式数组。json文件:

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

如果您正在运行ng service，则重新启动ng service，否则更改将不可见。Bootstrap 4+现在应该在你的应用程序上工作。

可选择的解决方案: 将Bootstrap添加到Angular的另一个解决方案是使用ngx-bootstrap项目，该项目提供了由Angular支持的Bootstrap组件。请查看这个答案，了解更多关于在Angular中使用ngx-bootstrap或ngx-bootstrap项目自己的文档。

重要更新:ng2-bootstrap现在被ngx-bootstrap取代

ngx-bootstrap同时支持Angular 3和Angular 4。

更新:1.0.0-beta。11-webpack或以上版本

首先，在终端中使用以下命令检查你的angular-cli版本:

ng -v

如果你的angular-cli版本大于1.0.0-beta。11-webpack，那么你应该按照这些步骤:

安装ngx-bootstrap和bootstrap: NPM安装ngx-bootstrap——保存

这一行现在安装Bootstrap 3，但是将来可以安装Bootstrap 4。请记住，ngx-bootstrap支持这两个版本。

src / app / app.module开放。Ts和添加: import {AlertModule} from 'ngx-bootstrap'; .．. @NgModule ({ .．. import: [AlertModule.forRoot()，…), .．. }) angular-cli开放。Json(对于angar6及以后的文件名称更改为angular. Json。Json)，然后在styles数组中插入一个新条目: “风格”:( “styles”css, “. . / node_modules /引导/ dist / css / bootstrap.min.css” ), 打开src/app/ app.ponent .html，添加: <警报类型=“成功”> < /警报>你好

1.0.0-beta。10个或以下版本:

如果你的angular-cli版本是1.0.0-beta。10或以下，则可以使用以下步骤。

首先，进入项目目录并键入:

npm install ngx-bootstrap --save

然后，打开angular-cli-build.js并添加这一行:

vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

现在，打开src/system-config。然后写:

const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

,:

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};

做以下几点:

npm i bootstrap@next --save

这将为您的项目添加引导4。

接下来进入src/style。SCSS或src/style.css文件(选择你正在使用的任何一个)并导入bootstrap:

对于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";

对于脚本，你仍然需要在angular-cli中添加文件。在Angular版本6中，这个编辑需要在Angular .json文件中完成:

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

使用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"
        ]