Bootstrap Js file is not applying in Angular 8

Question

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

Better way would be to load the scripts in scripts[] present in angular.json — Piyush, Dec 19 '19 at 09:06
@ShahidManzoorBhat Actually it is external file so Do I need to install npm ?3 — K.S, Dec 19 '19 at 09:08
any errors in console ? can you attach complete index.html code ? — Allabakash, Dec 19 '19 at 09:08
@Allabakash no there is no erro in console how can I attach here — K.S, Dec 19 '19 at 09:09
Instead of adding external scripts/css directly to index.html, use angular.json for inclusion. you can check this - https://stackoverflow.com/questions/43557321/angular-4-how-to-include-bootstrap — Allabakash, Dec 19 '19 at 09:16
@KuldeepKoranga it would be better, if you could add screenshot of the folder structure with files. — Piyush, Dec 19 '19 at 09:18
@KuldeepKoranga also need the code you added in angular.json — Piyush, Dec 19 '19 at 09:18
@Piyush `"assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.css" ], "scripts": [ "src/assets/js/bootstrap.min.js" ]` this is the json file code — K.S, Dec 19 '19 at 09:23
@KuldeepKoranga let's continue in chat room https://chat.meta.stackexchange.com/rooms/1437/chat-with-kuldeep-for-js-file-loading-issue — Piyush, Dec 19 '19 at 09:30

score 0 · Answer 1 · answered Dec 19 '19 at 09:31

0

you should add jquery and bootstrap scripts in angular.json scripts section.

answered Dec 19 '19 at 09:31

Chirag Chaudhari

1,617
3
14
20

score 0 · Answer 2 · answered Dec 19 '19 at 14:23

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 file is not applying in Angular 8

2 Answers2

Linked