Bootstrap 在 Angular 6 中无法正常工作

Posted 2023-03-06

【中文标题】Bootstrap 在 Angular 6 中无法正常工作

【英文标题】：Bootstrap not working properly in Angular 6

【发布时间】：2019-03-11 14:27:05

【问题描述】：

我开始学习 Angular 并且正在学习教程。我尝试将代码放在导航栏教程中：

<nav class="navbar navbar-default">
  <div class="container-fluid">
     <div class="navbar-header">
         <a href="#" class="navbar-brand">Recipe book</a>
     </div>
     <div class="collapse navbar-collapse">
         <ul class="nav navbar-nav">
             <li> <a href="#">Recipe</a></li>
             <li> <a href="#">Shopping list</a></li>
         </ul>
         <ul class="nav navbar-nav navbar-right">
              <li class="dropdown">
                  <ul class="dropdown-menu">
                      <li><a href="#">Save data </a></li>
                      <li><a href="#">Fetch data </a></li>
                  </ul>
              </li>
         </ul>
     </div>
  </div>
</nav>

但我得到的只是：

如果我删除引导程序，我会得到其他项目。

我在styles.css 中使用npm install bootstrap --save 和@import "~bootstrap/dist/css/bootstrap.css"; 来使用引导程序。

编辑：

我不想打开一个有两个问题的问题，但是在查看了迄今为止的答案之后，我无法描述我遇到的另一个问题：

我还使用nmp install jquery --save 安装了 Jquery 并添加到 angular.json：

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

在这种情况下，从 styles.css` 中删除 @import "~bootstrap/dist/css/bootstrap.css"; 后，引导程序根本不起作用。 我让引导程序工作的唯一方法是我在问题中描述的那样。

编辑 2：

我开始了一个新项目，并按照@HDJEMAI 的回答说明进行操作。 我现在仍然得到与图片相同的页面，但它现在通过添加到 angular.json 中的样式和脚本的行而不是通过 style.css 文件中的 @import "~bootstrap/dist/css/bootstrap.css" 工作。但问题仍然是即使代码相同，也与教程中的不一样。

这是他在教程中得到的：

【问题讨论】：

从截图来看，它实际上似乎按预期工作。您可能想添加 bg-light 类，但我想这取决于您期望它的样子

我认为这个解决方案会起作用：***.com/questions/51870386/…

@ATT ：更新 angular.json 脚本文件后，您可能需要运行 npm install 或再次构建您的应用程序。

@HDJEMAI Qeustion 已更新

@ATT：我在我的答案中使用了该配置在一个真正的工作项目中，这个答案很好。对于您的特定项目，您必须添加所需的任何其他依赖项。或使用stackblitz创建一个尽可能接近您的应用程序的真实示例，我可以查看或其他人可以查看您还有什么问题。因此，如果您能够在不手动导入所需文件的情况下让引导程序工作，请至少考虑接受答案。这样，它将帮助其他有相同问题的人。

【参考方案1】：

您必须同时安装bootstrap 和JQuery：

npm install bootstrap jquery --save

然后你会在你的节点模块文件夹中找到这些文件：

node_modules/jquery/dist/jquery.min.js
node_modules/bootstrap/dist/css/bootstrap.min.css
node_modules/bootstrap/dist/js/bootstrap.min.js

然后你必须更新你的 angular.json 文件：

在architect、build 部分，甚至test 部分，如果您希望在测试应用程序时看到 Bootstrap 也能正常工作。

"styles": [
    "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"
  ],

如果不添加jquery.min.js 脚本，Bootstrap 将不起作用。

另一个要求是 popper.js 如果您需要 Bootstrap 下拉菜单，那么您还需要安装它并添加脚本文件

npm install popper.js

然后也添加这个脚本

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

Bootstrap dropdown require Popper.js (https://popper.js.org)

【讨论】：

可能在 node_modules 前面缺少 './' 的问题

试过你的方式 HDJEMAI，它工作，但我不得不重新启动应用程序。如果我对 css 文件进行更改，它会立即得到反映，但是当我在 angular.json 中进行更改时，我不得不重新启动应用程序（Ctrl+C 然后 ng serve）

【参考方案2】：

如果您将引导路径添加到 angular.json 文件中，请确保它是 project\architect\build 中的 styles。不是项目\architect\test中的那个。

"projects": 
        "architect": 
            "build": 
                    "styles": [
                        "node_modules/bootstrap/dist/bootstrap.min.css",
                         "src/styles.css"
                    ],
            "test": 
                    "styles": [
                         "src/styles.css"
                    ],

【讨论】：

是的，但仅供参考，我已经在 project\architect\test 中使用过它，因为有时您需要 - 用于高级调试 - 为 ag-grid 组件查找 CSS 元素，以便能够进行单元测试或 e2e 测试，因此在使用 chrome 的调试模式下，您将可以访问到真实的 UI，然后你就可以轻松抓取一些元素。

我只是赞成这一点，因为我发现我所做的更改正在测试中。很容易忽略，它节省了我的时间。谢谢。

【参考方案3】：

亲爱的朋友，我正在学习相同的 angular6 教程。 我也面临同样的情况。最后我解决了这个问题 首先卸载引导程序。 下一步是通过以下命令安装引导程序

npm install --save bootstrap@3 A

接下来转到styles.css并粘贴

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

您的应用程序肯定会与 udemy 的视频教程中的应用程序完全相同

【讨论】：

@baiju krishnan：Bootstrap 需要 JQuery。请在此处阅读文档：getbootstrap.com/docs/4.3/getting-started/introduction。下面是其中的一小部分：我们的许多组件都需要使用 javascript 才能运行。 具体来说，它们需要 jQuery、Popper.js 和我们自己的 JavaScript 插件。 ...

我也开始学习 Angular 并且您的解决方案有效。为什么我们需要通过添加 angular.json 文件来复制 @import 语句，它应该可以工作。 HDJEMAI 的回应是我觉得足够好，但不知道为什么这不起作用，而这确实起作用。

@baiju Krishnan：感谢您的回答。使用“../node_modules/bootstrap/dist/css/bootstrap.css”，它适用于我

【参考方案4】：

我有同样的问题。下面对我有帮助。

停止服务器并使用重新编译 服务

【讨论】：

我同意使用 Ctrl+C / ng serve 重新启动服务器后，我无需添加此行即可运行引导程序：@import '~bootstrap/dist/css/bootstrap.min.css';

【参考方案5】：

如我所见，如果您在 UDEMY 中学习“Maximilian Schwarzmüller”课程，请确保您已安装 Bootstrap 3，而不是其他任何东西。在您的项目文件夹中使用这些命令（仅在安装了其他版本时才卸载）。

npm uninstall --save bootstrap
npm install --save bootstrap@3

这会将它本地安装到您的项目中。

我已经安装了 Bootstrap4（我认为课程仍然可以使用 4 而不是 3），并且使用 Bootstrap3 代替了你在课程中的同一个项目（没有 popper 和 jQuery）。

【讨论】：

任何想法，引导程序 4 中缺少什么

【参考方案6】：

添加你的 angular.json

    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": 
        "xtreme-admin-angular": 
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": ,
            "architect": 
                "build": 
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": 
                        "outputPath": "dist/xtreme-admin-angular",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ],
                        "styles": [
                            "node_modules/bootstrap/dist/bootstrap.min.css"
                             //Your root depend this path
                        ]

然后重新运行您的项目

【讨论】：

这对我来说效果最好。我唯一的区别是我在样式数组中包含了我的 styles.css 文件。

【参考方案7】：

在您的 index.html 文件中添加这 3 个链接。您不必安装 bootstrap 或 jquery 或更新 angular.json 文件。用作魅力。

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

【讨论】：

这只是一个快速修复，它没有遵循 Angular 框架中的正确放置。

【参考方案8】：

install npm install bootstrap@latest jquery --save
install npm install popper.js;

然后转到 Angular.json 文件（第 47 行）更改行：

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

【参考方案9】：

我做了与上面答案中列出的完全相同的事情，但仍然面临同样的问题。 就我而言，我指的是 angular.json 中错误的 popper.js 路径

"node_modules/popper.js/dist/js/popper.js",

而不是

"node_modules/popper.js/dist/umd/js/popper.js",

【参考方案10】：

安装引导程序并将其添加到angular.json 文件后。

如果 bootstrap 不渲染，只需更改开发 URL 的端口：

ng serve --port <your choice of port>

【参考方案11】：

对我来说，我必须两者都做，复制 angular.json 中的 node_modules jquery 和 bootstrap js 文件

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

并在styles.css中复制@import "~bootstrap/dist/css/bootstrap.css";

【参考方案12】：

就我而言，我通过将以下内容添加到“style.css”文件中解决了这个问题，并且成功了。

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

【参考方案13】：

上述方法很好，但有时有效，有时无效，即使您所做的一切都是正确的。我个人更喜欢手动下载 css/js 并将它们保存在 assets 文件夹中，并在 index.html 中提供链接。如果出现任何问题，浏览器控制台会告诉您问题，而在传统方法中，浏览器控制台不提供任何信息/错误。

【参考方案14】：

我认为是bootstrap的问题，试试这个：

第 1 步。 里面.angular-cli.json文件

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

删除"../node_modules/bootstrap/dist/css/bootstrap.min.css"

第 2 步。 转至styles.css

通过添加此行导入引导程序

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

这些步骤解决了我在构建过程中遇到的错误。

【参考方案15】：

厌倦了很多事情，但这就是今天对我有用的东西：

package.json

  "dependencies": 
    "@angular/animations": "~8.2.5",
    "@angular/common": "~8.2.5",
    "@angular/compiler": "~8.2.5",
    "@angular/core": "~8.2.5",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "~8.2.5",
    "@angular/platform-browser": "~8.2.5",
    "@angular/platform-browser-dynamic": "~8.2.5",
    "@angular/router": "~8.2.5",
    "bootstrap": "^4.3.1",
    "bootstrap-sass": "^3.3.7",
    "firebase": "^6.6.0",
    "jquery": "^3.4.1",
    "moment": "^2.24.0",
    "node-sass": "^4.11.0",
    "popper.js": "^1.15.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  

angular.json

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

【参考方案16】：

我检查了很多方法

"../"... 要么 "./"... 或/ 我也不想在“style.css”中使用，因为可能想要添加一些依赖于“js”文件的“js”文件或“css”文件 为此 最好的办法是

 "styles": [
                        "src/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"
                    ]

但不仅要重启浏览器或 IDE

【参考方案17】：

使用 VS 代码编辑器的引导项也有同样的问题。我在ng serve 之前尝试了ng build，并且引导项工作正常。

【参考方案18】：

我遇到了同样的问题，我也遵循 udemy 的相同课程，在外部导航标签中添加“nav-expand-lg”类解决了我的问题。我的 angular.json 文件也与@HDJEMAI 回答的相同

<nav class="navbar nav-expand-lg navbar-default">
  <div class="container-fluid">
     <div class="navbar-header">
         <a href="#" class="navbar-brand">Recipe book</a>
     </div>
     <div class="collapse navbar-collapse">
         <ul class="nav navbar-nav">
             <li> <a href="#">Recipe</a></li>
             <li> <a href="#">Shopping list</a></li>
         </ul>
         <ul class="nav navbar-nav navbar-right">
              <li class="dropdown">
                  <ul class="dropdown-menu">
                      <li><a href="#">Save data </a></li>
                      <li><a href="#">Fetch data </a></li>
                  </ul>
              </li>
         </ul>
     </div>
  </div>
</nav>

【参考方案19】：

我会先检查“build”和“test”部分下的“styles”和“scripts”

【参考方案20】：

我也遇到了同样的问题。经过大量的试验和错误，我终于发现问题出在使用 bootstrap 3 语法和 bootstrap 4 库。检查 package.json 中的引导程序版本，然后确定引导程序语法。 更新这个<nav class="navbar navbar-expand-sm bg-dark navbar-dark">，你的代码应该可以工作了。

【参考方案21】：

在style.css 中添加这一行，它就可以工作了。

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

谢谢

【参考方案22】：

请检查您所有的 .component.ts 文件，尤其是 recipe.component.ts. 可能有 CSS 封装调整之类的

@Component(
  selector: 'app-recipes',
  templateUrl: './recipes.component.html',
  styleUrls: ['./recipes.component.css'],
  encapsulation: ViewEncapsulation.ShadowDom
)

如果是这样。您应该删除封装属性。

【参考方案23】：

已经很晚了，但是我遇到了同样的问题，尽管在angular.json 中添加了bootstrap.min.css 和bootstrap.min.js。

我通过重新启动 Angular 服务器（使用ng serve）解决了这个问题。显然，只有重新加载使用最后保存的 json 文件。重启服务器应该可以解决问题。

【参考方案24】：

我遇到了同样的问题。首先安装 npm install bootstrap 的 Bootstrap 并将其添加到带有 "styles":["src/styles.css","node_modules/bootstrap/dist/css/bootstrap.min.css" ] 的 angular.json 中，然后您应该重新启动您的服务器然后它会工作...

【参考方案25】：

另一种更简单的添加引导程序的方法是将 CDN 链接放在 index.html 的头部（在这种情况下无需通过 npm 安装引导程序）：

link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"

这行得通！