Answers:
只要您使用Angular-CLI生成新项目，还有另一种方法可以使Angular 2/4中的引导程序可访问。
$ npm install --save bootstrap。该--save选项将使引导程序出现在依赖项中。"styles"数组的引用。该引用必须是使用npm下载的引导程序文件的相对路径。就我而言："../node_modules/bootstrap/dist/css/bootstrap.min.css",我的示例.angular-cli.json：
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "bootstrap-test"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
现在，引导程序应成为默认设置的一部分。
也可以通过ng2-bootstrap项目获得与Angular2的集成：https : //github.com/valor-software/ng2-bootstrap。
要安装它，只需将这些文件放在您的HTML主页面中：
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">然后，您可以通过以下方式将其用于组件：
import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';
@Component({
selector: 'my-app',
directives: [Alert],
template: `<alert type="info">ng2-bootstrap hello world!</alert>`
})
export class AppComponent {
}您需要做的就是在您的index.html文件中包含boostrap css。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">app.component.html。请告诉。
另一个非常好（更好？）的替代方法是使用由angular-ui团队创建的一组小部件：https : //ng-bootstrap.github.io
如果您打算使用此线程中提到的angular-ui团队的ng-bootstrap所需的Bootstrap 4，则可以改用它（注意：您不需要包括JS文件）：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">您还可以在运行后npm install bootstrap@4.0.0-alpha.6 --save通过指向文件中的styles.scss文件来本地引用此文件，并假设您使用的是SASS：
@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';@import其保存到您的SASS文件中。如果没有，您可以尝试将其添加到vendor.ts文件中，但是我没有在代码中使用它。
最受欢迎的选择是使用一些以npm软件包形式分发的第三方库，例如ng2-bootstrap项目https://github.com/valor-software/ng2-bootstrap或Angular UI Bootstrap库。
我个人使用ng2-bootstrap。有许多方法可以配置它，因为配置取决于Angular项目的构建方式。我在下面发布了基于Angular 2 QuickStart项目https://github.com/angular/quickstart的示例配置
首先，我们在package.json中添加依赖项
{ ...
"dependencies": {
"@angular/common": "~2.4.0",
"@angular/compiler": "~2.4.0",
"@angular/core": "~2.4.0",
...
"bootstrap": "^3.3.7",
"ng2-bootstrap": "1.1.16-11"
},
... }然后我们必须将名称映射到systemjs.config.js中的正确URL
(function (global) {
System.config({
...
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
//bootstrap
'moment': 'npm:moment/bundles/moment.umd.js',
'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
...
});
})(this);我们必须在index.html中导入bootstrap .css文件。我们可以从硬盘驱动器上的/ node_modules / bootstrap目录（因为我们添加了bootstrap 3.3.7依赖项）或从Web上获取它。在那里，我们可以从网络获取它：
<!DOCTYPE html>
<html>
<head>
...
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
...
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>我们应该从/ app目录编辑app.module.ts文件
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//bootstrap alert import part 1
import {AlertModule} from 'ng2-bootstrap';
import { AppComponent } from './app.component';
@NgModule({
//bootstrap alert import part 2
imports: [ BrowserModule, AlertModule.forRoot() ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }最后是/ app目录中的app.component.ts文件
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<alert type="success">
Well done!
</alert>
`
})
export class AppComponent {
constructor() { }
}然后，在运行应用程序之前，我们必须安装bootstrap和ng2-bootstrap依赖项。我们应该去我们的项目目录并输入
npm install最后，我们可以启动我们的应用程序
npm startng2-bootstrap项目github上有许多代码示例，展示了如何将ng2-bootstrap导入到各种Angular 2项目构建中。甚至还有plnkr示例。Valor软件（库的作者）网站上也有API文档。
在angular-cli环境中，我发现的最直接的方法如下：
1.在具有样式表的环境中的解决方案
npm install bootstrap-sass —save在style.scss中：
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';注1：该~字符是对nodes_modules文件夹的引用。
注意2：在使用scss时，我们可以自定义所需的所有boostrap变量。
2.在具有样式表的环境中的解决方案
npm install bootstrap —save在style.css中：
@import '~bootstrap/dist/css/bootstrap.css';有几种方法可以使用Bootstrap配置angular2，要获得最大的收益，最完整的方法之一就是使用ng-bootstrap，使用此配置，我们可以使algular2对DOM进行完全控制，而无需使用JQuery和Boostrap .js。
1-以使用Angular-CLI创建并使用命令行的新项目为起点，安装ng-bootstrap：
npm install @ng-bootstrap/ng-bootstrap --save注意：有关更多信息，请访问https://ng-bootstrap.github.io/#/getting-started
2-然后我们需要为CSS和网格系统安装引导程序。
npm install bootstrap@4.0.0-beta.2 --save注意：有关更多信息，请访问https://getbootstrap.com/docs/4.0/getting-started/download/
现在我们有了环境设置，为此我们必须更改.angular-cli.json并添加到样式中：
"../node_modules/bootstrap/dist/css/bootstrap.min.css"这是一个例子：
"apps": [
{
"root": "src",
...
],
"index": "index.html",
...
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
]下一步是将ng-boostrap模块添加到我们的项目中，为此，我们需要添加app.module.ts：
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';然后将新模块添加到应用程序应用程序：NgbModule.forRoot（）
例：
@NgModule({
declarations: [
AppComponent,
AppNavbarComponent
],
imports: [
BrowserModule,
NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})现在，我们可以在angular2 / 5项目上开始使用bootstrap4了。
我有同样的问题，并发现本文提供了一个非常干净的解决方案：
http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/
以下是说明，但提供了我的简化解决方案：
安装Bootstrap 4（说明）：
npm install --save bootstrap@4.0.0-alpha.6如果需要，将src / styles.css重命名为styles.scss并更新.angular-cli.json以反映更改：
"styles": [
"styles.scss"
],然后将此行添加到styles.scss中：
@import '~bootstrap/scss/bootstrap';只需检查您的package.json文件并添加引导程序依赖项
"dependencies": {
"bootstrap": "^3.3.7",
}然后在.angular-cli.json文件中添加以下代码
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],最后，您只需使用终端在本地更新npm
$ npm updateAngular 6+和Bootstrap 4+的操作步骤：
npm install --save bootstrap@4.1.3npm install --save jquery 1.9.1npm audit fix@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";要么
将此行添加到您的主要index.html文件中： <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
我一直在寻找相同的答案，最后我找到了此链接。您可以找到说明了三种不同的方法，如何将bootstrap css添加到您的angular 2项目中。它帮助了我。
这是链接：http : //codingthesmartway.com/using-bootstrap-with-angular/
我的建议是不要在json笔中声明它，然后将其放在scss中，以便将所有内容编译到一个位置。
1）使用npm安装bootstrap
npm install bootstrap2）用我们的样式在CSS中声明bootstrap npm
创建_bootstrap-custom.scss：
// Required
@import "bootstrap-custom-required";
// Optional
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
...
..
.3）在styles.scss中插入
@import "bootstrap-custom";因此，我们将所有核心内容汇总到一个地方
您可以尝试使用Prettyfox UI库http://ng.prettyfox.org
该库使用bootstrap 4样式，不需要jquery。
如果您使用angular cli，则在将bootstrap添加到package.json并安装该软件包之后，只需将boostrap.min.css添加到.angular-cli.json的“样式”部分。
一件重要的事情是“当您对.angular-cli.json进行更改时，您将需要重新启动ng服务以获取配置更改。”
参考：
https://github.com/angular/angular-cli/wiki/stories-include-bootstrap