0

everyone. Hope you are having a good day.

I've started an Angular project from scratch, I've installed all the packages I need through npm. I've decided to use bootstrap and I've found it has to be coupled with jquery to work properly. I need to do some collapsible menus.

I used npm i --save bootstrap and npm i --save jquery to install both libraries. Both show up in the package.json and package-lock.json files but none of them appear in the node_modules folder.

I have both added in the angular.json file as follows:

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

The bootstrap library works fine (for some reason) but the jquery doesn't, thus things are not collapsible. I tried to change that jquery reference route in the file and searched through the node_modules folder hoping to find any reference to the plugin but no luck so far. The Chrome console doesn't throw any error whatsoever, so I understand everything should work fine but it doesn't.

What can I do to make jquery work properly?

Nahuel Leiva
  • 107
  • 1
  • 10
  • This answer will help you: https://stackoverflow.com/questions/43557321/angular-4-how-to-include-bootstrap – Bernhard Beatus Jun 06 '21 at 16:26
  • the last bootstrap (5.0) **not** use jQuery else `bootstrap.bundle.min.js` or `popper.min.js`+ `bootstrap.min.js`, see https://getbootstrap.com/docs/5.0/getting-started/download/ BTW, you can use also bootstrap.css + ng-bootstrap (that has the bootstrap component in an "more angular" way:https://ng-bootstrap.github.io/#/home (now is is betta the solution for bootstrap 5) – Eliseo Jun 06 '21 at 19:05

2 Answers2

0

I had such a problem too as you told you can't see in the node-model folder so make sure you are on the right path where using npm i --save jquery :

c:/right-path-of-node-module# npm i --save jquery;

at the end if it was not applicable yet. try to add those files manually.

Program_Lover
  • 91
  • 1
  • 10
  • I've marked this as an answer to my question just for the sake of the question. I did make it work creating the project through Visual Studio with the Angular template project instead. – Nahuel Leiva Jun 09 '21 at 14:29
0

The reason you're not able to see bootstrap and jQuery in your node_modules, there is a problem while installing angular so again give this command below I have mentioned

npm install -g @angular/cli

Then install bootstrap using the terminal, npm install bootstrap --save.
To install jQuery use the command: npm install jquery --save.

Tyler2P
  • 2,324
  • 26
  • 22
  • 31
Mohammed Bahauddin
  • 1
  • 1