Bootstrap Js 文件在 Angular 8 中不适用



我在资产文件夹中有引导 js 文件,例如>assets/js/bootstrap.min.js并且我已经在我的索引.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

感谢您的任何回复

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

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

您可以在angular.json文件中执行此操作,如下所示:

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

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

正如@Chirag乔达里已经建议的那样

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

希望对您有所帮助。

最新更新