带有引导程序 4.1 的 Angular 6 未加载答案

【问题标题】：Angular 6 with bootstrap 4.1 not loading带有引导程序 4.1 的 Angular 6 未加载
【发布时间】：2020-08-25 11:28:30
【问题描述】：

我似乎无法通过 angular.json 文件加载引导程序

与此问题类似，但是不会加载任何与引导程序相关的内容。但是， ng build 和 ng serve 似乎没有报告任何问题。只是然后我浏览到页面，很明显没有任何样式。
Bootstrap 4.1.1 Navbar not working with Angular 6

[ 注意 ] 回滚到 Bootstrap@3.3.7 似乎工作得很好

package.json

{
  "name": "client-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "bootstrap": "^4.1.1",
    "core-js": "^2.5.4",
    "jquery": "^3.3.1",
    "popper": "^1.0.1",
    "popper.js": "^1.14.3",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.8",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.8",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }

angular.json "

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

【解决方案1】：

我以前遇到过这个问题，解决方案是 @import '../node_modules/bootstrap/dist/css/bootstrap.css'; 在任何代码顶部的 style.css 文件中。所以bootstrap会加载成功

【讨论】：

你的回答救了我。感谢您的回答
@Menna Ramadan，我们需要像 css 一样导入 bootstrap.min.js 吗？
@Sricharan 是的，我想是的，如果您的应用程序中需要引导 js 文件。

【解决方案2】：

我刚刚将它添加到 Angular 7 项目中，步骤如下：

1- 安装引导程序 4：

npm install bootstrap

2- 将以下导入添加到 src\styles.css

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

【讨论】：

这终于奏效了，但为什么？？？为什么一定要在style.css中手动导入，在angular.json的“styles”属性中导入有什么用？
老实说，我问过自己同样的问题，但那是我当时的工作方式:(所以想分享以帮助别人:)。

【解决方案3】：

我建议编辑styles.css：

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

如果更好的解决方案非常简单有效

【讨论】：

我认为通过这种方式（在〜后使用空格）会导致错误并且不会加载引导程序。

【解决方案4】：

如果在使用“ng serve”渲染应用程序后更新/安装了引导程序，则终止该进程并重新编译应用程序。

【讨论】：

这应该是正确的答案。将 angular.json 更改为包含脚本和样式后，否则应终止并重新启动 ng serve。我通过比较实际 webserver (IIS) 中的 dist 版本确认了这一点，并确认即使 webserver 版本更新，ng serve 版本也没有更新。

【解决方案5】：

不要使用 @import '~bootstrap/dist/css/bootstrap.css'。

我已经用下面的方法解决了 @import 'bootstrap/dist/css/bootstrap.css'; 在styles.css中

【讨论】：

【解决方案6】：

导入 bootstrap.css 是完全没有必要的，因为它是重复的过程。我已经通过删除引导程序解决了这个问题 - 有时配置可能用于引导程序 3 - 然后使用 npm install bootstrap 安装最新版本解决了我的问题。

【讨论】：

【解决方案7】：

写@import '../node_modules/bootstrap/dist/css/bootstrap.css';在 style.css 中这会给你编译错误之后编写如下旧代码以使其工作

【讨论】：