Bootstrap Js文件不适用于Angular 8 [英] Bootstrap Js file is not applying in Angular 8

问题描述

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

这是怎么回事，或者有什么方法可以使用它.

 <！doctype html>< html lang ="zh-CN">< 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"><！-主样式表->< link rel ="stylesheet" type ="text/css" href ="assets/css/style.css"><！-响应式样式表->< link rel ="stylesheet" type ="text/css" href ="assets/css/sensitive.css"><！-Favicon->< link href ="assets/images/favicon.png" rel =快捷方式图标" 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><身体><！-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><！-所有插件和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><！-主自定义JS->< script type ="text/javascript" src ="assets/js/main.js"></script>< app-root></app-root></body></html> 

文件结构在这里 https://kuldeepkoranga-connekt.tinytake.com/tt/Mzk1NjkyMl8xMjE0N https://kuldeepkoranga-connekt.tinytake.com/tt/Mzk1NjkyNF8xMjE0NjIy>>

感谢您的回复

解决方案

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

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

 资产":["src/favicon.ico"，"src/资产"，"src/assets/*"//在最后添加此行.]， 

在此行的最后，我们要告诉angular在资产文件夹中构建其他文件夹，以将其视为资产.

@Chirag Chaudhari已经建议

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

希望有帮助.

I have bootstrap js file inside assets folder like> assets/js/bootstrap.min.js and I have added in my index.HTML page with scrip tag <script src="assets/js/bootstrap.min.js"></script> but is not applying in my component.

What is wrong here or is there any way to use it.

    <!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>

file structure is here https://kuldeepkoranga-connekt.tinytake.com/tt/Mzk1NjkyMl8xMjE0NjIyMw https://kuldeepkoranga-connekt.tinytake.com/tt/Mzk1NjkyNF8xMjE0NjIyNQ

Thanks for any response

解决方案

As all the scripts and styles you are trying to load are inside some folders in assets so you need to tell angular to load and consider those folders as assets.

You can do that in angular.json file as follows:

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

With this line at end we are telling angular to build other folders inside assets folder to consider as assets.

As already suggested by @Chirag Chaudhari

This is normally not a good way to load scripts and styles as assets, instead load them with scripts and styles array present in angular.json file.

Hope it helps.

这篇关于Bootstrap Js文件不适用于Angular 8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！