如何将引导程序添加到 angular-cli 项目

重要更新： ng2-bootstrap 现在已替换为 ngx-bootstrap

ngx-bootstrap 支持 Angular 3 和 4。

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

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

ng -v

如果您的 angular-cli 版本大于 1.0.0-beta.11-webpack，那么您应该按照以下步骤操作：

安装 ngx-bootstrap 和 bootstrap： npm install ngx-bootstrap bootstrap --save

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

打开 src/app/app.module.ts 并添加： import { AlertModule } from 'ngx-bootstrap'; ... @NgModule({ ... imports: [AlertModule.forRoot(), ... ], ... }) 打开 angular-cli.json （对于 angular6 和更高版本的文件名更改为 angular.json ）并插入样式数组中的新条目：“styles”：[“styles.css”，“../node_modules/bootstrap/dist/css/bootstrap.min.css”]，打开 src/app/app.component.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.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 上的全局库安装可帮助您找到答案。

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

首先，从 npm 安装 Bootstrap：

npm install bootstrap

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

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

上述步骤对于某些功能的工作很重要，例如下拉菜单的显示。

最后将 Bootstrap CSS 文件添加到 angular.json 文件中的 apps[0].styles 数组中：

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

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

替代解决方案： 将 Bootstrap 添加到 Angular 的另一个解决方案是利用 ngx-bootstrap 项目，该项目提供由 Angular 提供支持的 Bootstrap 组件。请查看此 answer 以了解有关将 ngx-boostrap 与 Angular 或 ngx-bootstrap 项目自己的 documentation 一起使用的更多信息。

---

请执行下列操作：

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

---

首先，您必须使用这些命令安装 tether、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。

在属性应用程序下，该数组中的第一项是默认应用程序。

有一个属性样式允许将外部全局样式应用于您的应用程序。

指定 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

配置项目

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

如果您使用 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

您可以在文档中查看导入引导程序 here 的新方法

如果还是不行，用 ng serve 命令重启

1.0.0 或以下版本：

在您的 index.html 文件中，您只需要引导 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

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

---

安装 bootstrap npm install bootstrap@next 将代码添加到 .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”] , 最后将 bootstrap.css 添加到您的代码 style.scss @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";重新启动本地服务器

---

Angular 5 中 Bootstrap 4 的步骤

创建 Angular 5 项目 ng new AngularBootstrapTest 移动到项目目录 cd AngularBootstrapTest 下载引导程序 npm install bootstrap 将引导程序添加到项目 4.1 打开 .angular-cli.json 4.2 在 json 中找到“样式”部分 4.3 添加引导程序 css 路径，如下所示。 “样式”：[“../node_modules/bootstrap/dist/css/bootstrap.min.css”，“styles.css”]，

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

测试引导

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

.

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

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

保存文件运行项目 ng serve --open

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

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

---

2个简单的步骤

安装 Bootstrap（正在安装最新版本）

npm install bootstrap@next

导入到您的项目中，在您的 styles.scss 中添加以下行

@import '~bootstrap';

请注意您的导入顺序可能很重要，如果您有其他使用引导程序的库，请将此导入语句放在最前面

结束。 :)

注意：以下是我的版本

角度：9

节点：v10.16.0

npm：6.9.1

---

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

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>

---

运行此命令

npm install bootstrap@3

你的 Angular.json

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

---

由于这变得如此混乱，并且这里的答案完全混合，我只建议与官方 ui-team 一起使用 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 {
}

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

---

执行以下步骤：

npm install --save bootstrap 并在您的 .angular-cli.json 中，添加到样式部分：

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

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

享受

---

使用 npm npm install bootstrap 安装 Bootstrap

2.安装Popper.js

npm install --save popper.js

3.转到 Angular 6 项目中的 angular.json / Angular 5 中的 .angular-cli.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"
        ]

---

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

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 实现。因此，您无需在 .angular-cli.json 的脚本部分中包含 bootstrap.min.js。

当您将引导程序与生成的项目与 angular-cli 最新版本集成时，请按照以下步骤操作。

在 .angular-cli.json 样式部分中包含 bootstrap.min.css。 “样式”：[“styles.scss”，“../node_modules/bootstrap/dist/css/bootstrap.min.css”]，

安装 ng-bootstrap 依赖项。 npm install --save @ng-bootstrap/ng-bootstrap

将此添加到您的主模块类中。从'@ng-bootstrap/ng-bootstrap'导入{NgbModule}；

在您的主要模块导入部分中包含以下内容。 @NgModule({ 导入：[NgbModule.forRoot(), ...], })

如果您要在这些模块类中使用 ng-bootstrap 组件，请在您的子模块中执行以下操作。从'@ng-bootstrap/ng-bootstrap'导入{NgbModule}； @NgModule({ 导入：[NgbModule, ...], })

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

---

安装引导程序，popper.js

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

在 src/styles.css 中，导入 bootstrap 的样式

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

---

我看到很多解决方案不再适用于新版本的 Angular-CLI。

您可以尝试在 app.component.html 的顶部添加以下链接标签，在底部添加脚本标签。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

但是如果你想使用 ngx-bootstrap 然后在你的项目目录中运行以下命令

ng add ngx-bootstrap

将其作为 app.component.html 的内容进行测试

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

---

对于引导程序 4.5，角度 10

npm install bootstrap --save

使用 bootstrap import 语句更新您的 styles.scss。

 $theme-colors: (
    "primary":    #b867c6,
    "secondary":  #f3e5f5,
    "success":    #388e3c,
    "info":       #00acc1,
    "light":      #f3e5f5,
    "dark":       #863895
);

@import "~bootstrap";

@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

body {
    color: gray('800');
    background-color: theme-color('light');
    font-family: 'Raleway', sans-serif;
}

导入引导程序应该在您的变量覆盖之后。 [此示例还显示了如何放置自己的主题颜色。]

---

安装助推器

npm install --save bootstrap

然后我们需要将 Bootstrap Sass 导入到我们的应用程序中。在styles.scss 添加这一行：

@import "../node_modules/bootstrap/scss/bootstrap.scss";

For more info...

---

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

---

在 bash 中运行 npm install ng2-bootstrap bootstrap --save 在 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 bootstrap@next

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

---

在项目中运行以下命令

npm install --save @bootsrap@4

如果你得到这样的确认

+ bootstrap@4.1.3
updated 1 package in 8.245s

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

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

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

https://i.stack.imgur.com/V2GGK.png

---

Step1:
npm install bootstrap@latest --save-dev 这样会安装最新版本的bootstrap，不过可以通过添加版本号来安装指定的版本

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

---

用于同时添加 Bootstrap 和 Jquery

npm install bootstrap@3 jquery --save

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

---

如果您刚刚开始使用 angular 和 bootstrap，那么简单的答案将是以下步骤： 1. 添加 bootstrap 的节点包作为开发依赖项

npm install --save bootstrap

在 angular.json 文件中导入引导样式表。 "styles": [ "projects/my-app/src/styles.scss", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ]，你已经准备好使用 bootstrap 进行样式设置、网格等.

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

---

2020 年 8 月更新：Angular 10

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

ng add @ng-bootstrap/ng-bootstrap

ng s

示例片段：

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

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

警告！最好检查一下自己，你看起来不太好。

---

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

---

使用 angular-cli 和 css 的工作示例：

1.安装引导

npm install bootstrap tether jquery --save

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

---