1

I'm trying to use the free template into my Angular 9 application, but have failed multiple times. The sliders, products and the main page banner is not coming despite many attempts. I would recommend you to download the template once and check the folder directories for better understanding.

1) I tried installing the js and CSS files via NPM and then calling the required files in angular.json scripts and style array but some packages didn't work although most of them did.

2) Calling the js and CSS files by js and CSS folder like src/assets/js/bootstrap.min.js and src/assets/css/bootstrap.min.css but it didn't help and produced lots of errors.

3) Unzipping the files inside the source folder and then calling them like src/assets/source/bootstrap-4.4.1-dist/js/bootstrap.min.js but this also returned some errors.

By far I've got the best result using NPM packages and calling then inside angular.json, but still jQuery didn't work as expected.

angular.json:

"styles": [
              "src/assets/sass/style.scss",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/slicknav/dist/slicknav.min.css",
              "./node_modules/elegant-icons/style.css",
              "./node_modules/font-awesome/css/font-awesome.min.css",
              "./node_modules/jquery-ui-dist/jquery-ui.min.css",
              "./node_modules/jquery-nice-select/css/nice-select.css",
              "./node_modules/owl.carousel/dist/assets/owl.carousel.min.css",
              "src/assets/css/style.css",
              "src/styles.scss"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js",
              "./node_modules/jquery-ui-dist/jquery-ui.min.js",
              "./node_modules/jquery-nice-select/js/jquery.nice-select.min.js",
              "./node_modules/slicknav/dist/jquery.slicknav.min.js",
              "./node_modules/mixitup/dist/mixitup.min.js",
              "./node_modules/owl.carousel/dist/owl.carousel.min.js",
              "src/assets/js/main.js"
            ]

Problem:

enter image description here enter image description here

surjendu_dey
  • 578
  • 2
  • 11
  • 28
  • I think the styling and the js has worked , and here the issue is with the jquery. And this would help to get through the issue [link](https://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular) – Lalana Chamika May 16 '20 at 16:54

1 Answers1

0

Try to add the jQuery CDN in the header tags of the index.html file, and reload the page.

index.html

<head>
...
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
...
</head>
Lalana Chamika
  • 607
  • 12
  • 17