AngularJS项目中Bootstrap样式不生效问题求助

我正在学习AngularJS，最近碰到个头疼的问题——我的Web应用里的Bootstrap主题完全没生效，导航栏还是默认的原生HTML样式，完全看不到Bootstrap应该有的美化效果。

以下是我写的头部导航HTML代码：

<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="#">Recipes</a></li>
        <li><a href="#">Shopping List</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class ="dropdown-toggle" role="button">Manage <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Save Data</a></li>
            <li><a href="#">Fetching data</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

我已经在项目里导入了Bootstrap，配置文件里的相关片段如下：

{
  "test": "test.ts",
  "tsconfig": "tsconfig.app.json",
  "testTsconfig": "tsconfig.spec.json",
  "prefix": "app",
  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ]
}

现在应用的导航栏完全没有Bootstrap的样式效果，相关的截图在这里：[导航栏无Bootstrap样式截图](enter image description here)。如果需要查看更多AngularJS相关文件，请告诉我，谢谢！

内容的提问来源于stack exchange，提问作者Bhavik Donga