时间戳

首页 > 解决方案 > Bootstrap Js 文件不适用于 Angular 8

javascript - Bootstrap Js 文件不适用于 Angular 8

问题描述

我在资产文件夹（如 >）中有引导 js 文件，assets/js/bootstrap.min.js并且我在 index.HTML 页面中添加了带有 scrip 标记的页面，<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

感谢您的任何回复

标签： javascriptangularbootstrap-4

解决方案

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

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

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

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

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

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

希望能帮助到你。

推荐阅读