我在 angular 8 中安装了 bootstrap 但没有工作。为什么？

Question

我在我的项目中安装了 bootstrap 3.4.1 和 jquery。没有错误。package.json 中显示了版本 我还在 angular.json 文件中添加了 bootstrap 文件路径。但是 bootstrap 主题根本不起作用。

我跟着这个视频来安装引导程序：https : //www.youtube.com/watch? v = KaTtlGSJ0QE

安装进行得很顺利，但使用http://localhost:4200/node_modules/bootstrap/dist/css/bootstrap.min.css 的验证 在控制台中出现了一些错误。

角度.json：

"styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/jquery/dist/jquery.min.js"
            ]

html：

<div class="container-fluid ">
      <h1>Login</h1>
      <form  [formGroup]="loginForm" (ngSubmit)="onSubmit()">

          <div class="form-group">
            <label for="userName">User Name : </label>
            <input formControlName="userName" type="text" class="form-control" >
          </div>
          <div class="form-group">
              <label for="password">Password : </label>
              <input  formControlName="password" type="password" class="form-control" >
          </div>

            <button class="btn btn-primary" type="submit"  >Login</button>

        </form>
        {{loginForm.value | json}}
    </div>

o/p 不包含任何预期的引导程序样式。

Answer 1

像这样更改 angular.json：

"styles": [
   "node_modules/bootstrap/dist/css/bootstrap.min.css",
   "src/styles.scss"
],
"scripts": [
   "node_modules/jquery/dist/jquery.min.js", // <- jQuery goes first
   "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

您也可以在此处将您的代码与作者版本进行比较。该教程的文本版本。