Bootstrap在Angular 6中无法正常工作

Question

我开始学习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>

但是我所得到的是：

如果删除引导程序，则可以得到其他项。

我曾经npm install bootstrap --save和@import "~bootstrap/dist/css/bootstrap.css";Styles.css中使用的引导。

编辑：

我不想打开一个有两个问题的问题，但是在看了到目前为止到目前为止还不能描述另一个问题的答案之后：

我还使用安装了Jquery nmp install jquery --save并将其添加到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"

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

编辑2：

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

这是他在本教程中得到的：

Answer 1

如果要将引导程序路径添加到 angular.json 文件中，请确保它是project\architect\ build 中的样式。不是 project\architect\ test中的那个。

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

Answer 2

您必须同时安装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文件：

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

引导程序下拉列表需要Popper.js（https://popper.js.org）

Answer 3

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

npm install --save bootstrap@3 A

接下来转到styles.css并粘贴

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

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

Answer 4

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

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

Answer 5

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

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

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

我安装了 Bootstrap4（认为课程仍然可以使用 4 而不是 3）并使用 Bootstrap3 代替在与课程相同的项目中工作（没有 popper 和 jQuery）。