Angular 7：Jquery 和 Bootstrap 不工作

Question

使用此命令 npm install bootstrap 安装 Bootstrap 和 Jquery 后 --save 仍然无法获取，如果 bootstrap 安装在 angular与否

输出：

HTML 模板：

<div style="text-align:center">
  <h1>
    {{ title }}!
  </h1>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" routerLink="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" routerLink="/page1">Page 1 <span class="sr-only">(current)</span></a>
      </div>
    </div>
  </nav>
  <button type="btn btn-primary">Hello</button>
 </div> 

<router-outlet></router-outlet>

Index.html：[只有当我在 index.html 中添加 jquery & Bootstrap cdn 时，它才有效，但我想这不是正确的解决方案，对吗？]

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularAssignment</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


</head>
<body class="hello">
  <app-root></app-root>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" ></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
</body>
</html>

Answer 1

如果您可以在 node_module 文件夹中看到它们。它已安装。但是您还必须在 Angular 应用程序中导入模块和 CSS 文件。 Bootstraphere可以找个好的material，jQuery就得去.angular-cli.json 文件并将其添加到 scripts 属性： "scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

Answer 2

正如 @Dániel Barta 所建议的那样，npm install 还不够。现在您必须将已安装的软件包导入您的应用程序。

在应用程序的根目录下找到名为 angular.json.

的文件

Bootstrap:

在 json 文件中，搜索 "styles" 属性表示路径数组
将 "node_modules/bootstrap/dist/css/bootstrap.min.css" 添加到该数组的末尾

JQuery

在那个 json 文件中，搜索 "scripts" 属性，它代表一个数组，同样是路径，但这次是 js 文件。
将 "node_modules/jquery/dist/jquery.min.js" 添加到该数组的末尾

如果你想使用bootstrap.js，在下面添加它的路径jquery import:

JQuery + bootstrap.js:

"node_modules/jquery/dist/jquery.min.js",

"node_modules/bootstrap/dist/js/bootstrap.js"=17=]

所以，Bootstrap css + jquery + bootstrap.js 导入应该是这样的：

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

如果您在样式或脚本数组中已有自己的路径，请保留它们，并将这些路径添加到数组底部。

我能给你的最好建议是阅读 Angular 文档，研究一下安装包及其工作原理。

Angular 7：Jquery 和 Bootstrap 不工作

Angular 7: Jquery and Bootstrap not working

angular-ui-bootstrap

angular