如何添加引导到一个angular-cli项目

我们想在angular-cli 1.0.0-beta.5生成的应用程序中使用bootstrap 4 (4.0.0-alpha.2)(w/ node v6.1.0)。

在获得bootstrap及其与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应该提供的，因为它“照顾”构建部分?

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

685289 次浏览
小开
最佳答案

重要更新: 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，那么你应该遵循以下步骤:

  1. 安装ngx-bootstrap和引导:

    npm install ngx-bootstrap bootstrap --save

This line installs Bootstrap 3 nowadays, but can install Bootstrap 4 in the future. Keep in mind ngx-bootstrap supports both versions.

  1. Open src/app/app.module.ts and add:

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

  2. Open angular-cli.json (for angular6 and later file name changed to angular.json ) and insert a new entry into the styles array:

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

  3. Open src/app/app.component.html and add:

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

1.0.0-beta.10 or below versions:

And, if your angular-cli version is 1.0.0-beta.10 or below, then you can use below steps.

First, go to the project directory and type:

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'
}
};
小开

更新v1.0.0-beta.26

你可以在文档中看到导入引导在这里的新方法

如果仍然不工作，使用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'
]
});
};

不要忘记这个命令 将你的模块放到vendor: 

ng build

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

小开

查找关键字>全球图书馆安装

. on 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项目自己的文档

小开
你也可以观看Mike Brocchi的这段视频，其中有关于如何在Angular-Cli生成的项目中添加引导的有用信息。 https://www.youtube.com/watch?v=obbdFFbjLIU (around minutes 13:00)

.
小开

首先，你必须用这些命令安装tether, jquery和bootstrap

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

在你的angular-cli中添加这些行。json(角。Json从版本6起)文件

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

做以下几点:

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

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

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>
小开
  1. 在bash npm install ng2-bootstrap bootstrap --save中运行
  2. 在angular-cli.json
    中添加/更改以下内容 <代码>“风格”:( “. . / node_modules /引导/ dist / css / bootstrap.min.css” ), “脚本”:( “. . / node_modules / jquery / dist / jquery.min.js”, “. . / node_modules /引导/ dist / js / bootstrap.min.js” 李],< /代码> < / >
小开

试试这个

npm install bootstrap@next

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

小开
  1. < p >安装引导

    npm install bootstrap@next

  2. Add code to .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. Last add bootstrap.css to your code style.scss

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

  4. Restart your local server

小开

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

npm install --save bootstrap

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

< p > <代码>“风格”:[ “styles”css 代码),< / > < / p >

把它改成

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

全部完成。

小开

因为还没有人参考官方(angular-cli团队)关于如何包含Bootstrap的故事:https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

包括引导

引导是一个流行的CSS框架，可以在Angular项目中使用。 本指南将带你向Angular CLI项目中添加bootstrap，并将其配置为使用bootstrap

使用CSS

开始

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

ng new my-app
cd my-app

安装引导

随着新项目的创建和准备好，你接下来需要将bootstrap安装到你的项目作为依赖项。 使用--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。

使用萨斯

开始

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

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;

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

小开

由于这变得如此令人困惑，这里的答案完全是混合的，我只建议使用BS4的官方ui团队回购(是的，NG-Bootstrap有很多这样的回购。

只要按照这里的指示https://github.com/ng-bootstrap/ng-bootstrap来获得BS4。

摘自图书馆:

这个库是由ui-bootstrap团队从头构建的。我们

与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 {
}

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

小开

angular-cli现在有一个专门的wiki页面，在那里你可以找到你需要的一切。TLDR，通过npm安装bootstrap，并在你的.angular-cli.json文件中添加样式链接到“样式”部分

小开

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

1.安装引导

NPM安装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"
],
小开

请执行以下步骤:

  1. npm install --save bootstrap

  2. 在你的。angular-cli中。添加到样式部分:

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

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

享受

小开

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

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

ng-bootstrap是完全取代JavaScript实现的组件。所以你不需要在.angular-cli.json的scripts部分中包含bootstrap.min.js。

当你在angular-cli的最新版本中集成bootstrap和生成的项目时，请遵循以下步骤。

  • 在angular-cli中包含bootstrap.min.css。Json，样式节。

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

  • Install ng-bootstrap dependency.

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

  • Add this to your main module class.

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

  • Include the following in your main module imports section.

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

  • Do the following also in your sub module(s) if you are going to use ng-bootstrap components inside those module classes.

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


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

  • Now your project is ready to use available ng-bootstrap components.

小开

使用NPM安装引导程序

npm install boostrap@next --save

然后检查你的node_modules文件夹中的boostrap.css文件(在dist内)，通常路径是

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

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

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

就是这样。

小开

Angular 5中引导4的步骤

  1. 创建Angular 5项目

    ng新的AngularBootstrapTest < / p >

  2. 移动到项目目录

    cd AngularBootstrapTest < / p >

  3. < p >下载引导

    NPM安装引导 < / p >

  4. 添加引导到项目

    4.1打开.angular-cli.json

    4.2在json中找到“styles”部分

    4.3添加bootstrap CSS路径如下所示

    ．

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

Now you have succesfully added the bootstrap css in angular 5 project

Test bootstrap

  1. open src/app/app.component.html
  2. add bootstrap button component

.

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

你可以在这里引用按钮样式(https://getbootstrap.com/docs/4.0/components/buttons/)

  1. 保存文件

  2. 运行项目

    发球——开球 < / p >

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

< p >注意: 如果你在ng服务之后添加了引导路径，你必须停止并重新运行ng服务以反映变化

小开

一个使用angular-cli的工作示例:

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

适用于css和scss。引导程序v3和v4可用。

更多关于引导原理图的信息，请找到在这里。

小开

  1. 使用npm安装引导

    npm install bootstrap

2.Install 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"
]
小开
  1. 安装引导程序，popper.js
< p > npm install --save bootstrap npm install --save popper.js < / p >
  1. 在src / styles.css中，导入bootstrap的样式

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

小开

使用npm i --save bootstrap@version安装引导程序。现在，转到nodemodules文件夹，从bootstrap文件夹复制'bootstrap.min.css.js'的路径，并将完整的路径(如nodemodules/bootstrap/css/bootstrap.min.css.js)粘贴在angular.json下的script标签文件下，重新运行服务器，检查安装是否成功，在任何你喜欢的浏览器中运行程序，按F12，你会发现窗口的一部分被打开，现在转到元素选项卡打开头部标签，如果你看到bootstrap在style标签中，那么你的安装成功了。

小开

在项目中运行以下命令

npm install --save @bootsrap@4

如果你得到这样的确认

+ bootstrap@4.1.3
updated 1 package in 8.245s

说明boostrap 4安装成功。然而，为了使用它，你需要更新angular. properties下的“styles”数组。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。 enter image description here < / p >

小开

不管你使用的是哪种JS框架，通过以下2步将bootstrap导入到你的项目很容易:

使用npm i -S bootstrap或yarn add bootstrap安装引导程序。

在styles.css或styles.scss中，导入bootstrap为@import '~bootstrap/dist/css/bootstrap.min.css'。

小开

只需在index.html的Head标签中添加这三行

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
小开
< p >步骤1:< br > npm install bootstrap@latest --save-dev 这将安装最新版本的引导程序， 但是，可以通过添加版本号

来安装指定的版本 打开styles.css并添加以下内容 @import "~bootstrap/dist/css/bootstrap.css" < / p >
小开

没看到这个:

@import 'bootstrap/scss/bootstrap.scss';
我刚刚在style.scss中添加了这一行 在我的情况下，我还想覆盖引导变量
小开

添加Bootstrap和Jquery

npm install bootstrap@3 jquery --save

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

小开
如果你刚刚开始使用angular和bootstrap，那么简单的答案将如下步骤: 1. 将bootstrap节点包添加为dev依赖项

npm install --save bootstrap
  1. 在angular中导入引导样式表。json文件。

    < p > <代码>“风格”:[ “项目/ app / src / styles.scss”, ”。/ node_modules /引导/ dist / css / bootstrap.min.css” 代码),< / > < / p > < /李>

  2. 和你已经准备好使用引导样式，网格等。

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

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

小开

你有很多方法在你的Angular项目中添加Bootstrap 4:

  • 在你的Angular项目的index.html文件中包含引导CSS和JavaScript文件，

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

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

小开

执行该命令

npm install bootstrap@3

你Angular.json

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

你可以使用npm install bootstrap命令在angular中安装bootstrap。

以及angular.json文件和style.css文件中的下一次安装引导路径。

你可以阅读关于如何安装&在angular， 点击这里阅读完整的博客中设置bootstrap

小开

我发现很多解决方案在新版本的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>
小开

2个简单步骤

  1. 安装引导程序(正在安装最新版本)
npm install bootstrap@next
  1. 导入到你的项目中，在你的styles.scss中添加下面这行
@import '~bootstrap';

请注意您的导入顺序可能会有影响，如果您有其他库使用bootstrap，请将此import语句放在顶部

最后。：）

注:以下是我的版本

Angular: 9

节点:v10.16.0

NPM: 6.9.1

小开

将此添加到styles.css文件中

@import "~bootstrap/dist/css/bootstrap.css";
小开

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 {
}


<p>
<ngb-alert [dismissible]="false">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</ngb-alert>
</p>

小开

对于bootstrap 4.5, angular 10

npm install bootstrap --save

更新你的风格。这样的SCSS带有bootstrap import语句。

 $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;
}

导入引导应该在变量覆盖之后。[这个例子还展示了如何放置自己的主题颜色。]

小开
< p >好消息!基本上，Bootstrap 5现在可以很容易地实现，甚至不需要jQuery。
在您的终端上运行

npm install bootstrap@next --save

因此，Angular在你的app.module中使用webpack。Ts，只要加上:

import "bootstrap";

或者如果你想分别导入它们，可以这样做:

import { ModuleToBeImported } from 'bootstrap';

然后是你的风格。scss,添加:

@import '~bootstrap/scss/bootstrap';
基本上就是这样，但是要注意一些组件需要popper.js。 需要bootstrap's js的组件 . js 在这里你也会看到依赖于popper.js的组件，在编写本文时，它们是用于显示和定位的下拉菜单，以及用于显示和定位的工具提示和弹出窗口

因此，要安装popper.js，只需运行:

npm install @popperjs/core

参考 .

小开

安装boostrap

npm install --save bootstrap

然后我们需要导入Bootstrap Sass到我们的应用程序中。在风格。SCSS添加这一行:

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

For more info

小开

首先安装引导

npm i bootstrap

导入到angular中。json风格

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

提交答案