Problem when integrating Jquery, bootstrap and Popper.Js scripts at angular 6

Asked

Viewed 1,557 times

0

I have a problem integrating bootstrap.js, Popper.js and jquery.js scripts into my Angular project. I’ve made some attempts, but nothing has solved so far.

My scripts are being embedded as follows:

"styles": [
              "./node_modules/bootstrap/scss/bootstrap.scss",
              "src/styles.scss"
],
"scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/popper.js/dist/popper.js",
              "node_modules/bootstrap/dist/js/bootstrap.js"
            ]

One important note: Bootstrap’s Css is being loaded correctly and working perfectly. I’ve tried putting a ./ to try to get the current directory reference.

javascript twitter-bootstrap angular front-end

  • Friend pq vc put . js twice? Your folder name has . js? vc put "Popper.js/dist/Popper.js" wouldn’t just be "Popper/dist/Popper.js"

  • Unfortunately no, @hugocsl. The path is the same.

  • As you are using Sass makes itself different to import style, see my answer.

2 answers

1


0

try the following:

"styles": [  
          "src/styles.css",  
          "./node_modules/bootstrap/dist/css/bootstrap.min.css"  
        ],  
        "scripts": [              
          "./node_modules/jquery/dist/jquery.min.js",  
          "./node_modules/popper.js/dist/umd/popper.min.js",  
          "./node_modules/bootstrap/dist/js/bootstrap.min.js"  
        ]

Check if the following steps have been done before

Bootstrap has dependency on Jquery and Popper js. To install Jquery and Popper js, type the following commands.

To install jQuery type:

npm install jquery --save

Install Popper.js with this:

npm install popper.js --save

And for Bootstrap 4, this one:

npm install ngx-bootstrap [email protected]

Reference (Second Method): https://www.c-sharpcorner.com/article/how-to-install-jquery-popper-and-bootstrap-in-angular/

Also do the following: Open the 'src/Styles.css' file and include this line at the beginning:

@import "~bootstrap/dist/css/bootstrap.css";

This will cause Bootstrap styles to be imported.

Browser other questions tagged javascript twitter-bootstrap angular front-end

You are not signed in. Login or sign up in order to post.