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>

但我得到的只是：

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

我在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 中的样式和脚本的行而不是通过 @import "~bootstrap/dist/css/bootstrap.css" 在 styles.css 文件中工作。但是即使代码相同，问题仍然是与教程中的不同。

这是他在教程中得到的：

原文由 ATT 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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 下拉菜单需要 Popper.js (https://popper.js.org)

原文由 HDJEMAI 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您要将引导程序路径添加到 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"
                    ],

原文由 Mann Wong 发布，翻译遵循 CC BY-SA 4.0 许可协议