将Bootstrap 4添加到Angular 6或Angular 7应用程序

Question

我正在使用Bootstrap 4开发Angular应用程序。

我需要与我的angular应用程序中添加的scss相关的帮助。

我的问题是：

• 在Angular 6和Angular 7中添加bootstrap 4 scss的方式是否相同？

即

npm install bootstrap --save  

然后，打开angular.json文件，并将引导文件路径添加到样式部分。喜欢：

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

以上两种方式的角度是否相同。

Answer 1

您需要执行以下操作：

将Bootstrap添加到package.json（通过npm install bootstrap --save完成）

将Bootstrap添加到angular.json（也需要jQuery）

  "styles": [
     "styles.css".
     "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
     "../node_modules/jquery/dist/jquery.min.js",
     "../node_modules/popper.js/dist/umd/popper.min.js",
     "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

Angular应用程序（app.module.ts）中的参考引导程序

import bootstrap from "bootstrap";

演示：https : //codesandbox.io/s/kmm2q7zvko
文章：https : //medium.com/wdstack/angular-7-bootstrap-4-starter-25573dff23f6

Answer 2

Bootstrap 在 Angular 6 / 7 / 8 中无法正常工作

我通过网络尝试了大部分解决方案，但对我没有任何作用

只有下面的代码对我有用

无需更改 angular.json

直接将下面一行添加到 style.css 文件中

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

因为在 angular.json 中我们已经提供了 style.css 的参考

Answer 3

选项1

执行

npm install bootstrap@4 jquery --save

Bootstrap的JavaScript部分依赖于jQuery。因此，您也需要jQuery JavaScript库文件。

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

选项2

ng-bootstrap它包含一组基于Bootstrap标记和CSS的本地Angular指令。结果，它不依赖于jQuery或Bootstrap的JavaScript

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

安装后，将其导入您的根模块中，并在@NgModule imports`数组中注册

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

ng-bootstrap需要在您的项目中添加Bootstrap的4个CSS。您需要通过以下方式显式安装它：

npm install bootstrap@4  --save 

在您的angular.json中，将文件路径添加到构建目标下的styles数组中

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