Angular cannot access bootstrap from node_modules when I provide path in angular.json file

Question

I am trying to install bootstrap in my Angular project.

I used npm install --save bootstrap to install bootstrap in my project
After that I installed jquery
Provided path for bootstrap

Below is the angular.json file:

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

When I pass the above bootstrap path in style.css it works but I want to make it work by passing the path to angular.json.

style.css file@import "../node_modules/bootstrap/dist/css/bootstrap.css"

All the paths that I tried are mentioned below:

"./node_modules/boostrap/dist/css/bootstrap.css"

"node_modules/boostrap/dist/css/bootstrap.css"

"../node_modules/boostrap/dist/css/bootstrap.css"

See that the bootstrap 5 needn't jquery, see SO

Eliseo
– Eliseo

2022-10-25 09:41:50 +00:00
Commented Oct 25, 2022 at 9:41 — Eliseo
– Eliseo, Commented Oct 25, 2022 at 9:41

Florencia Cames · Accepted Answer · 2022-10-25 08:05:04Z

3

On my proyect I have it like this.

"./node_modules/boostrap/dist/css/bootstrap.css"

But keep in mind that if you don't stop the serve and run again ng serve, it will not show the change as the import is made at the begining of the ng serve process.

hope it works for you.

If you changed the angular.json from the location of the original configuration, let me know wo we can figure it out the correct path

answered Oct 25, 2022 at 8:05

Florencia Cames

3691 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lambda Over a year ago

It worked by re-running using ng-serve.

M_J · Accepted Answer · 2023-05-11 13:45:39Z

0

I had the same issue. after i update styles.css file with following code it worked.

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

then i remove that and used following code in angular.json

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

Then i re run ng serve as told here. It worked. thanks

answered May 11, 2023 at 13:45

M_J

1

Collectives™ on Stack Overflow

Angular cannot access bootstrap from node_modules when I provide path in angular.json file

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related