Angular 7:Jquery和引导程序不工作_Angular_Angular Ui Bootstrap

Angular 7:Jquery和引导程序不工作

angular

Angular 7:Jquery和引导程序不工作,angular,angular-ui-bootstrap,Angular,Angular Ui Bootstrap,在使用此命令安装引导程序和Jquery之后，如果引导程序是否安装在angular中，npm install Bootstrap-save仍然无法获取输出： HTML模板： Index.html:[仅当我在Index.html中添加jquery和Bootstrap cdn时，它才起作用，但我想这不是一个正确的解决方案，对吗？] <!doctype html> <html lang="en"> <head> <meta charset="utf-8

在使用此命令安装引导程序和Jquery之后，如果引导程序是否安装在angular中，npm install Bootstrap-save仍然无法获取

输出：

HTML模板：

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>

如果您可以在node_模块文件夹中看到它们。它已经安装好了。但是您还必须在Angular应用程序中导入模块和CSS文件。您可以找到一个很好的引导材料，对于jQuery，您必须转到.angular-cli.json文件，并将其添加到脚本属性：脚本：[../node\u modules/jquery/dist/jquery.min.js]

按照建议，仅安装npm是不够的。现在，您必须将已安装的软件包导入应用程序

在应用程序的根级别找到名为angular.json的文件

引导：

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

在该json文件中，搜索scripts属性，该属性表示一个路径数组，但这次是js文件。将节点_modules/jquery/dist/jquery.min.js添加到该数组的末尾如果要使用bootstrap.js，请在jquery导入下面添加its路径：

JQuery+bootstrap.js：

node_modules/jquery/dist/jquery.min.js

node_modules/bootstrap/dist/js/bootstrap.js

因此，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文档，研究一下如何安装软件包以及它是如何工作的。

我使用了以下方法参见styles:[src/styles.scss，node_modules/bootstrap/dist/css/bootstrap.min.css]，脚本：[node_modules/bootstrap/dist/js/bootstrap.min.js，node_modules/jquery/dist/jquery.min.js]，如果我在node_modules之前给出../那么同样的结果也会出现。请看我添加了HTML模板的问题。自从您修改了.angular cli.json之后，您是否重新运行了ng serve？您把事情弄混了一点。例如，您的最后一个按钮应该是HelloI，如果您在任何地方都可以看到对话btw@Dániel Barta，您建议只有我这样做了。并且e导入看起来也很相似。请尝试在节点\ U模块之前添加./而不是../

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