Bootstrap 在 Angular 6 中无法正常工作 [英] Bootstrap not working properly in Angular 6

问题描述

我开始学习 Angular，并且正在学习教程.我试着把代码放在导航栏的教程中:

<div class="container-fluid"><div class="navbar-header"><a href="#" class="navbar-brand">食谱书</a>

<div class="collapse navbar-collapse"><ul class="nav navbar-nav"><li><a href="#">食谱</a></li><li><a href="#">购物清单</a></li><ul class="nav navbar-nav navbar-right">

<ul class="下拉菜单"><li><a href="#">保存数据</a></li><li><a href="#">获取数据</a></li>

</nav>

但我得到的只是这个:

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

我在styles.css中使用了npm install bootstrap --save和@import "~bootstrap/dist/css/bootstrap.css";来使用bootstrap.

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

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

样式":["node_modules/bootstrap/dist/css/bootstrap.css",源代码/样式.css"],脚本":["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"; 后，bootstrap 根本无法工作.我让引导程序工作的唯一方法是我在问题中描述的那样.

编辑 2:

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

这是他在教程中得到的:

解决方案

你必须安装bootstrap和JQuery:

npm install bootstrap jquery --save

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

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

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

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

样式":[styles.css"，./node_modules/bootstrap/dist/css/bootstrap.min.css"],脚本":[./node_modules/jquery/dist/jquery.min.js"，./node_modules/bootstrap/dist/js/bootstrap.min.js"],

如果不添加 jquery.min.js 脚本 Bootstrap 将无法工作.

另一个要求是 popper.js 如果你需要 Bootstrap dropdown 那么你需要安装它并添加脚本文件

npm install popper.js

然后添加这个脚本

样式":[styles.css"，./node_modules/bootstrap/dist/css/bootstrap.min.css"],脚本":[./node_modules/jquery/dist/jquery.min.js"，./node_modules/popper.js/dist/popper.js"，./node_modules/bootstrap/dist/js/bootstrap.min.js"],

Bootstrap 下拉菜单需要 Popper.js (https://popper.js.org)

I started learning Angular and I'm following a tutorial. I tried putting the code as in the tutorial for the navigation-bar:

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

But all I get is this:

If I remove bootstrap, I do get the other items.

I used npm install bootstrap --save and @import "~bootstrap/dist/css/bootstrap.css"; in styles.css to use bootstrap.

EDIT:

I did not wanted to open a question with two problem, but after looking at the answers so far ill describe another problem I had:

I also installed Jquery using nmp install jquery --save and added to 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"

In this case, after removing @import "~bootstrap/dist/css/bootstrap.css"; from styles.css`, bootstrap is not working at all. The only way i got bootstrap to work is as i described in the question.

EDIT 2:

I started a new project and followed @HDJEMAI s answer instructions. I now still get the same page as in the picture but its now working through the rows added to styles and scripts in angular.json and not through the @import "~bootstrap/dist/css/bootstrap.css" in the styles.css file . But the problem is still that is not the same as in the tutorial even though the code is the same.

This is what he gets in the tutorial:

解决方案

You have to install both bootstrap and JQuery:

npm install bootstrap jquery --save

Then you will find these files in your node module folder:

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

Then you have to update your angular.json file:

In the architect, build section, or even test section if you want to see Bootstrap working as well when testing your application.

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

If you do not add the jquery.min.js script Bootstrap will not work.

Another requirement is popper.js if you need Bootstrap dropdown then you will need to install it and add the script file as well

npm install popper.js

Then add this script as well

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

这篇关于Bootstrap 在 Angular 6 中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！