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

【问题标题】：Add Bootstrap 4 to Angular 6 or Angular 7 application将 Bootstrap 4 添加到 Angular 6 或 Angular 7 应用程序
【发布时间】：2019-07-09 10:15:49
【问题描述】：

我正在使用 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"
],

上述方式对于两个角度的版本是否相同。

【问题讨论】：

是的。但是请注意在你的脚本部分 jquery 应该先出现然后引导 js。
是的方式和以前一样
我也是这样用的。但是您还需要在脚本中包含 theter 和 jQuery。
ng-bootstrap.github.io/#/home
关注这篇博文medium.com/@oyewusioyekunle/…

标签： angular npm bootstrap-4 angular-cli angular7

【解决方案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 应用中引用 Bootstrap (app.module.ts)

import bootstrap from "bootstrap";

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

【讨论】：

使用"styles.css", 代替"styles.css".
import 语句给出错误 node_modules/@types/bootstrap"' has no exported member 'bootstrap'。
@TheDoctor 在你的app.module.ts，尝试像这样导入bootstrap：import * as bootstrap from 'bootstrap';

【解决方案2】：

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

OPTION-2

ng-bootstrap 它包含一组基于 Bootstrap 的原生 Angular 指令标记和 CSS。因此，它不依赖于 jQuery 或 Bootstrap 的 JavaScript

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

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

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": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

【讨论】：

【解决方案3】：

引导程序在 Angular 6 / 7 / 8 中无法正常工作

我在网络上尝试了大部分解决方案，但对我没有用

只有下面的代码对我有用

angular.json 不需要改

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

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

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

【讨论】：

【解决方案4】：

你可以把这个路径放在 angular.json 文件中样式标签例如：-`输入代码 “样式”：[“./node_modules/bootstrap/dist/css/bootstrap.min.css”}

【讨论】：

【解决方案5】：

请记住，如果 ng serve 正在工作，请停止服务器以使 angular.json 文件中的更改生效。

【讨论】：