Bootstrap Js 文件不适用于 Angular 8答案

【问题标题】：Bootstrap Js file is not applying in Angular 8Bootstrap Js 文件不适用于 Angular 8
【发布时间】：2019-12-19 09:02:31
【问题描述】：

我在 assets 文件夹中有 bootstrap js 文件，例如> assets/js/bootstrap.min.js，并且我在 index.HTML 页面中添加了带有脚本标签 <script src="assets/js/bootstrap.min.js"></script> 但未应用到我的组件中。

这里有什么问题或者有什么方法可以使用它。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   <meta property="og:image:type" content="image/png"> 
  <meta property="og:image:width" content="96">
  <meta property="og:image:height" content="96">

  <meta content="width=2000" name="viewport">
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
  <meta charset="utf-8">
  <title>HomeClueWebApp</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" type="text/css" href="assets/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/icofont.css">
  <link rel="stylesheet" type="text/css" href="assets/css/stellarnav.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/featherlight.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/featherlight.gallery.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/hover.css">
  <link rel="stylesheet" type="text/css" href="assets/css/flexslider.css">
   <link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/owl.theme.default.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/slick.css">
  <link rel="stylesheet" type="text/css" href="assets/css/slick-theme.css">
  <link rel="stylesheet" type="text/css" href="assets/css/jquery-ui.css">
  <link rel="stylesheet" type="text/css" href="assets/css/animations.css">
  <link rel="stylesheet" type="text/css" href="assets/css/animate.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/morphext.css">
  <link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/owl.theme.default.css">
  <link rel="stylesheet" type="text/css" href="assets/css/jquery.mb.YTPlayer.min.css">

  <!-- Main stylesheet  -->
  <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  <!-- Responsive stylesheet  -->
  <link rel="stylesheet" type="text/css" href="assets/css/responsive.css">
  <!-- Favicon -->
  <link href="assets/images/favicon.png" rel="shortcut icon" type="image/png">
  <link href="assets/images/apple-icon.png" rel="icon" type="image/png">
  <link href="assets/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
      <!-- jQuery -->
      <script src="assets/js/jquery.min.js"></script>
      <script src="assets/js/bootstrap.min.js"></script>

      <!-- Bootstrap Core JavaScript -->
      <script src="assets/js/popper.min.js"></script>


      <!-- all plugins and JavaScript -->
      <script type="text/javascript" src="assets/js/css3-animate-it.js"></script>
      <script type="text/javascript" src="assets/js/stellarnav.min.js"></script>
      <script type="text/javascript" src="assets/js/featherlight.min.js"></script>
      <script type="text/javascript" src="assets/js/featherlight.gallery.min.js"></script>
      <script type="text/javascript" src="assets/js/jquery.flexslider.js"></script>
      <script type="text/javascript" src="assets/js/owl.carousel.min.js"></script>
      <script type="text/javascript" src="assets/js/jarallax.js"></script>
      <script type="text/javascript" src="assets/js/slick.min.js"></script>
      <script type="text/javascript" src="assets/js/jquery-ui.js"></script>
      <script type="text/javascript" src="assets/js/jquery-scrolltofixed-min.js"></script>
      <script type="text/javascript" src="assets/js/morphext.min.js"></script>
      <script type="text/javascript" src="assets/js/dyscrollup.js"></script>
      <script type="text/javascript" src="assets/js/jquery.ripples.js"></script>
      <script type="text/javascript" src="assets/js/jquery.mb.YTPlayer.min.js"></script>
      <script type="text/javascript" src="assets/js/app.js"></script>

      <!-- Main Custom JS -->
      <script type="text/javascript" src="assets/js/main.js"></script>
  <app-root></app-root>
</body>
</html>

文件结构在这里 https://kuldeepkoranga-connekt.tinytake.com/tt/Mzk1NjkyMl8xMjE0NjIyMw https://kuldeepkoranga-connekt.tinytake.com/tt/Mzk1NjkyNF8xMjE0NjIyNQ

感谢您的回复

【问题讨论】：

你是否从 NPM 安装了引导程序
你在 bootstrap 之前导入了 Jquery 吗？
更好的方法是在 angular.json 中的 scripts[] 中加载脚本
@Allabakash <script src="assets/js/jquery.min.js"></script> <script src="assets/js/bootstrap.min.js"></script>
@ShahidManzoorBhat 实际上它是外部文件所以我需要安装 npm 吗？3

标签： javascript angular bootstrap-4

【解决方案1】：

你应该在 angular.json scripts 部分添加 jquery 和 bootstrap 脚本。

【讨论】：

【解决方案2】：

由于您尝试加载的所有脚本和样式都在资产的某些文件夹中，因此您需要告诉 Angular 加载并将这些文件夹视为资产。

您可以在 angular.json 文件中执行以下操作：

"assets": [
   "src/favicon.ico",
   "src/assets",
   "src/assets/*" // Add this line at end.
],

在这行末尾，我们告诉 Angular 在资产文件夹中构建其他文件夹以将其视为资产。

正如@Chirag Chaudhari 已经建议的那样

这通常不是将脚本和样式作为资产加载的好方法，而是使用 angular.json 文件中存在的脚本和样式数组加载它们。

希望对你有帮助。

【讨论】：