我们想在由angular-cli 1.0.0-beta.5（w / node v6.1.0）生成的应用中使用引导程序4（4.0.0-alpha.2）。

在使用npm获得引导程序及其依赖关系之后，我们的第一种方法是将它们添加到angular-cli-build.js：

'bootstrap/dist/**/*.min.+(js|css)',  
'jquery/dist/jquery.min.+(js|map)',  
'tether/dist/**/*.min.+(js|css)',

并将它们导入我们的 index.html

<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

这样做可以正常工作，ng serve但是一旦我们生成带有-prod标志的构建，所有这些依赖关系就会从dist/vendor（惊奇！）中消失。

在使用angular-cli生成的项目中，我们打算如何处理这种情况（即加载引导脚本）？

我们有以下想法，但我们真的不知道该走哪条路...

• 使用CDN？但是我们宁愿提供这些文件以确保它们将可用

• 将依赖项复制到dist/vendor我们之后ng build -prod？但是，这似乎应该为angular-cli提供一些东西，因为它“照顾”了构建部分？

• 添加jquery，bootstrap和tether，src/system-config.ts并以某种方式将它们拉入我们的捆绑包中main.ts？但是考虑到我们不会在应用程序的代码中明确使用它们，这似乎是错误的（例如，不同于moment.js或类似lodash的东西）。

重要更新： ng2-bootstrap现在已由ngx-bootstrap取代

ngx-bootstrap支持Angular 3和Angular 3。

更新： 1.0.0-beta.11-webpack或更高版本

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

ng -v

如果您的angular-cli版本大于1.0.0-beta.11-webpack，则应遵循以下步骤：

1. 安装ngx-bootstrap和bootstrap：

   npm install ngx-bootstrap bootstrap --save

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

2. 打开src / app / app.module.ts并添加：

   import { AlertModule } from 'ngx-bootstrap';
   ...
   @NgModule({
   ...
   imports: [AlertModule.forRoot(), ... ],
   ... 
   })

3. 打开angular-cli.json（将angular6及更高版本的文件名更改为angular.json）并将新条目插入styles数组：

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

4. 打开src / app / app.component.html并添加：

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

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.ts，然后输入：

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

...和：

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

在https://github.com/angular/angular-cli上查找关键字> Global Library Installation，可以帮助您找到答案。

根据他们的文档，您可以按照以下步骤添加Bootstrap库。

首先从npm安装Bootstrap：

npm install bootstrap@next

然后将所需的脚本文件添加到angular-cli.json文件中的apps [0] .scripts中：

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

最后，将Bootstrap CSS添加到apps [0] .styles数组中：

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

如果正在运行，请重新启动服务，并且Bootstrap 4应该在您的应用程序上正常工作。

这是最好的解决方案。但是，如果您不重新启动服务，它将永远无法工作。强烈建议您执行此最后操作。

请执行下列操作：

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

对于脚本，您仍将必须像这样将文件添加到angular-cli.json文件中（在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"
],

首先，您必须使用以下命令安装系绳，jquery和bootstrap

npm i -S tether
npm i -S jquery
npm i -S bootstrap@4.0.0-alpha.4 

将这些行添加到angular-cli.json（从版本6开始的angular.json）文件中之后

  "styles": [
    "styles.scss",
    "../node_modules/bootstrap/scss/bootstrap-flex.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

由于尚无人提及关于如何包括Bootstrap的官方（angular-cli团队）故事：https : //github.com/angular/angular-cli/wiki/stories-include-bootstrap

包括引导程序

Bootstrap是一个流行的CSS框架，可以在Angular项目中使用。本指南将引导您逐步完成将引导程序添加到Angular CLI项目并将其配置为使用引导程序的过程。

使用CSS

入门

创建一个新项目并导航到该项目

ng new my-app
cd my-app

安装引导程序

创建并准备好新项目后，接下来您需要将引导程序作为依赖项安装到项目中。使用该--save选项，依赖项将保存在package.json中

# version 3.x
npm install bootstrap --save

# version 4.x
npm install bootstrap@next --save

配置项目

现在已经设置了项目，必须将其配置为包括引导CSS。

• .angular-cli.json从项目的根目录中打开文件。
• 在该属性下apps，该数组中的第一项是默认应用程序。
• 有一个属性styles，可以将外部全局样式应用于您的应用程序。
• 指定路径 bootstrap.min.css

完成后，它应如下所示：

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

注意：进行更改时，.angular-cli.json您将需要重新启动ng serve以获取配置更改。

测试项目

打开app.component.html并添加以下标记：

<button class="btn btn-primary">Test Button</button>

配置了应用程序后，运行ng serve以在开发模式下运行您的应用程序。在浏览器中导航到该应用程序localhost:4200。验证出现引导样式按钮。

使用SASS

入门

创建一个新项目并导航到该项目

ng new my-app --style=scss
cd my-app

安装引导程序

# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save

配置项目

创建一个空文件_variables.scss在src/。

如果您正在使用bootstrap-sass，请将以下内容添加到_variables.scss：

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

在styles.scss添加以下内容：

// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

测试项目

打开app.component.html并添加以下标记：

<button class="btn btn-primary">Test Button</button>

配置了应用程序后，运行ng serve以在开发模式下运行您的应用程序。在浏览器中导航到该应用程序localhost:4200。验证出现引导样式按钮。为了确保使用变量，请打开_variables.scss并添加以下内容：

$brand-primary: red;

返回浏览器以查看字体颜色已更改。

更新v1.0.0-beta.26

您可以在文档查看导入引导的新途径这里

如果仍然无法执行，请使用ng serve命令重新启动

1.0.0或以下版本：

在您的index.html文件中，您只需要Bootstrap CSS链接（不需要js脚本）

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

和

npm install ng2-bootstrap --save
npm install moment --save

在my_project / src / system-config.ts中安装ng2-bootstrap之后 ：

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages: any = {
  'ng2-bootstrap': {
    defaultExtension: 'js'
  },
  'moment':{
     format: 'cjs'
  }
};

在my_project / angular-cli-build.js中：

module.exports = function (defaults) {
return new Angular2App(defaults, {
    vendorNpmFiles: [
        'ng2-bootstrap/**/*',
        'moment/moment.js'
    ]
});
};

不要忘记此命令将模块放入供应商：

ng build

从相同原理的另一个模块导入。

我猜发布后上述方法已经改变，请查看此链接

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并添加

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

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

打开angular-cli.json并将新条目插入样式数组

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

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

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

Angular 5中Bootstrap 4的步骤

1. 创建Angular 5项目

   ng新的AngularBootstrapTest

2. 移至项目目录

   cd AngularBootstrapTest

3. 下载引导程序

   npm安装引导程序

4. 将Bootstrap添加到项目

   4.1打开.angular-cli.json

   4.2在json中找到“样式”部分

   4.3如下添加bootstrap css路径

   。

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

现在您已成功在angular 5项目中添加了引导css

测试引导

5. 打开 src/app/app.component.html
6. 添加引导按钮组件

。

<button type="button" class="btn btn-primary">Primary</button>

您可以在此处参考按钮样式（https://getbootstrap.com/docs/4.0/components/buttons/）

7. 保存文件

8. 运行项目

   ng服务-打开

现在，您将在页面中看到引导样式按钮

注意：如果您在ng服务之后添加了引导路径，则必须停止并重新运行ng服务以反映更改

由于这变得如此令人困惑，并且这里的答案完全是混杂的，我只建议与BS4回购的官方ui团队一起去（是的，对于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 {
}

到目前为止，这似乎是最一致的行为

1. 安装引导程序

   npm install bootstrap@next

2. 将代码添加到.angular-cli.json：

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

3. 最后将bootstrap.css添加到您的代码style.scss中

   @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

4. 重新启动本地服务器

请执行以下步骤：

1. npm install --save bootstrap

2. 然后在您的.angular-cli.json中，添加到样式部分：

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

之后，您必须重新启动服务

请享用

1. 使用npm安装Bootstrap

   npm install bootstrap

2，安装Popper.js

npm install --save popper.js

3.Goto angular.json在角6项目/ .angular-cli.json在角5并添加列出：

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

试试这个

npm install bootstrap@next

https://github.com/angular/angular-cli#global-library-installation

您也可以观看Mike Brocchi的视频，其中包含有关如何将引导程序添加到Angular-Cli生成的项目的有用信息。 https://www.youtube.com/watch?v=obbdFFbjLIU（大约13:00分钟）

1. 奔跑 npm install ng2-bootstrap bootstrap --save
2. 在以下位置添加/更改以下内容 angular-cli.json
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],

在相应的项目目录中打开终端/命令提示符，然后键入以下命令。

npm install --save bootstrap

然后打开.angular-cli.json文件，查找

"styles": [ "styles.css" ],

改成

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

全做完了。

现在，新的ng-bootstrap 1.0.0-beta.5版本支持基于Bootstrap标记和CSS的大多数本机Angular指令。

唯一需要使用的依赖项是 bootstrap。无需使用jquery和popper.js依赖项。

ng-bootstrap将完全替换组件的JavaScript实现。因此，您无需bootstrap.min.js在.angular-cli.json的脚本部分中包含该内容。

将bootstrap与生成的项目与angular-cli最新版本集成时，请执行以下步骤。

• 插入bootstrap.min.css您的.angular-cli.json样式部分。

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

• 安装ng-bootstrap依赖项。

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

• 将此添加到您的主模块类。

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

• 在主模块导入部分中包括以下内容。

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

• 如果要在这些模块类中使用ng-bootstrap组件，请在子模块中也执行以下操作。

  import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  
  @NgModule({
     imports: [NgbModule, ...],
  })

• 现在，您的项目已准备好使用可用的ng-bootstrap组件。

1. 安装引导程序popper.js

npm install --save bootstrap npm install --save popper.js

3. 在src / styles.css中，导入引导程序的样式

@import '~bootstrap/dist/css/bootstrap.min.css';

第1步：
npm install bootstrap@latest --save-dev 这将安装最新版本的引导程序，但是，可以通过添加版本号来安装指定的版本

步骤2：打开styles.css并添加以下内容 @import "~bootstrap/dist/css/bootstrap.css"

用于同时添加Bootstrap和Jquery

npm install bootstrap@3 jquery --save

运行此命令后，请继续检查您的node_modules文件夹，您应该能够看到其中已添加了引导程序和jquery。

angular-cli现在有一个专用的Wiki页面，您可以在其中找到所需的一切。TLDR，bootstrap通过安装npm，并将样式链接添加到.angular-cli.json文件中的“样式”部分

在使用angular-cli和css的情况下的工作示例：

1.安装引导程序

npm install bootstrap tether jquery-保存

2.添加到.angular-cli.json

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

使用npm安装boostrap

npm install boostrap@next --save

然后检查您的node_modules文件夹中的boostrap.css文件（在dist之内），通常路径是

"../node_modules/bootstrap/dist/css/bootstrap.css",

添加此路径| 在style.css或style.scss中导入boostrap

@import "../node_modules/bootstrap/dist/css/bootstrap.css";  //bootstrap
@import "~@angular/material/prebuilt-themes/indigo-pink.css // angular material theme

而已。

在项目中运行以下命令

npm install --save @bootsrap@4

如果得到这样的确认

+ bootstrap@4.1.3
updated 1 package in 8.245s

这意味着boostrap 4已成功安装。但是，为了使用它，您需要更新angular.json文件下的“样式”数组。

按照以下方式更新它，以便引导程序将能够覆盖现有样式

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

要确保一切设置正确，请运行ng serve > open browser at http://localhost:4200/ or a port you run the angular app > right click > inspect > under the head check the styles if you have bootsrap like shown below，然后最好使用boostrap。

在这里没有看到这个：

@import 'bootstrap/scss/bootstrap.scss';

我只是在style.scss中添加了这一行，就我而言，我也想覆盖bootstrap变量。

如果您刚开始使用angular和bootstrap，则可以按照以下步骤进行简单回答：1.将bootstrap的节点包添加为dev依赖项

npm install --save bootstrap

2. 在angular.json文件中导入引导样式表。

   "styles": [ "projects/my-app/src/styles.scss", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],

3. 并且您已经准备好使用引导程序进行样式，网格等操作。

   <div class="container">My first bootstrap div</div>

我发现的最好的部分是，我们正在使用引导程序进行引导，而没有任何第三方模块依赖性。我们可以随时通过更新命令npm install --save bootstrap@4.4等来升级引导程序。

您可以通过多种方式在Angular项目中添加Bootstrap 4：

• 在Angular项目的index.html文件的部分中包含带有和标签的Bootstrap CSS和JavaScript文件，

• 使用@import关键字将Bootstrap CSS文件导入Angular项目的全局styles.css文件中。

• 在项目的angular.json文件的styles和scripts数组中添加Bootstrap CSS和JavaScript文件

运行此命令

npm install bootstrap@3

您的Angular.json

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

您可以使用以下方式在角度安装bootstrap npm install bootstrap命令。

和angular.json文件中的下一个设置引导路径，以及style.css。

您可以阅读有关如何在angular中安装和设置引导程序的完整博客，请单击此处阅读有关此内容的完整博客。

在使用angular-cli的情况下的工作示例：

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

适用于CSS和CSS。Bootstrap v3和v4可用。

有关引导程序示意图的更多信息，请在此处找到。