Lambda
Lambda

Reputation: 43

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

I am trying to install bootstrap in my Angular project.

  1. I used npm install --save bootstrap to install bootstrap in my project
  2. After that I installed jquery
  3. 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"

Upvotes: 1

Views: 1401

Answers (2)

M_J
M_J

Reputation: 1

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

Upvotes: 0

Florencia Cames
Florencia Cames

Reputation: 359

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

Upvotes: 2

Related Questions