bootstrap 4无法正确使用角度6

Question

我正在尝试使用角度6来操作bootstrap 4.我正在测试它是否适用于Bootstrap的默认导航栏。

这是代码（只需从Bootstrap的组件中复制粘贴它们的页面）：

<nav class="navbar navbar-default">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-left">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>

我得到的只是蓝色的“品牌”这个词。我看不到任何导航栏。我尝试在类“btn btn-primary”上面添加一个按钮，看看我是否有Bootstrap。结果是一个带有白色文字的蓝色按钮，但它的样式不正确（例如没有边框）。就像bootstrap只是部分工作。重要的是要强调，此代码在具有必要链接和脚本标记的常规代码编辑器上完美运行。

我使用CLI bootstrap，jquery和popper.js下载。我可以在node_modules中看到它们。我也试着看看它是否适用于ngx-bootstrap而没有它。

在angular.json文件中，我写道：

        "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.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]   

顺便说一句，我不知道这是否与问题有关但不像我看到的所有教程都没有命名为angular-cli.json而是angular.json，而且它没有出现在src文件夹，但在主文件夹之外。这就是为什么我没有在“node_modules ...”之前写“../”。