When attempting to specify the path in the angular.json file, Angular encounters difficulty accessing Bootstrap from the node_modules directory

I have been attempting to integrate Bootstrap into my Angular project.

  1. Firstly, I used npm install --save bootstrap to add Bootstrap to my project.
  2. Following that, I installed jQuery as well.
  3. I then specified the path for Bootstrap.

Displayed below is an excerpt from 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"
        ]

Although I have successfully implemented the Bootstrap path in the style.css file, I aim to achieve the same result by specifying the path in angular.json.

In my style.css file:

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

Here are the various paths I have tested:

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

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

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

cssangulartypescriptnpmangular-bootstrap

Answer №1

In my project, the setup looks like this.

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

It's important to note that if you don't stop the server and then run ng serve again, you won't see the changes reflected because the import happens at the start of the ng serve process.

I hope this solution works for you.

If you've modified the angular.json file and changed the original configuration location, please let me know so we can find the correct path together.

Answer №2

I encountered a similar issue and managed to resolve it by making some changes to my styles.css file. I added the following code:

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

After that, I removed the code and instead included the following snippet in my angular.json file:

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

Finally, I restarted by running ng serve as described in the instructions provided. This fixed the issue. Thank you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you tell me what that sequence of characters is at the conclusion of a styled-component?

Technology Stack: React, Typescript I believe this question may have been asked before, but I am unsure how to search for it... I am interested in creating a wrapper for the styled-components library... Here is the API reference for the specific packag ...

javascriptreactjstypescriptstyled-components

Tips for converting Javascript require to Typescript import using the const keyword

Recently, I've been attempting to import faktory_worker_node from github.com/jbielick/faktory_worker. The README provides the following instructions: const faktory = require('faktory-worker'); faktory.register('ResizeImage', asyn ...

javascripttypescript

Typescript - A guide on updating the value of a key in a Map object

My Map is designed to store Lectures as keys and Arrays of Todos as values. lecturesWithTodos: Map<Lecture, Todos[]> = new Map<Lecture, Todos[]>(); Initially, I set the key in the Map without any value since I will add the Todos later. student ...

angulartypescriptdictionarysetkey

Exploring Cypress: Iterating over a collection of elements

I have a small code snippet that retrieves an array of checkboxes or checkbox labels using cy.get in my Angular application. When looping through the array to click on each element and check the checkboxes, it works fine if the array contains only one elem ...

typescriptforeachclickelementcypress

Tips for enforcing strict typing in TypeScript when implementing abstract functions

Consider the following scenario with two classes: abstract class Configuration { abstract setName(name: string); } class MyConfiguration extends Configuration { setName(name) { // set name. } } In this setup, the name parameter in M ...

typescript

Eliminate the hashtag (#) from the URL in Angular 11

I am facing an issue with removing the # from the URL. When I try to remove it, the application encounters a problem upon deployment to the server. Upon page refresh, a 404 error status is returned. For instance: https://example.com/user/1 (works) https ...

angulartypescriptwebangular11

How to change the display property in CSS from block to none using React

Just started diving into React, and I am struggling with making the content disappear when clicking a button. Tried using state and even checked out https://jsfiddle.net/uwadhwnr/, but nothing seems to work. Feeling quite frustrated at the moment. <div ...

cssreactjs

Is there a way to combine multiple incoming WebRTC audio streams into one cohesive stream on a server?

I am currently working on developing an audio-conferencing application for the web that utilizes a WebSocket server to facilitate connections between users and enables streaming of audio. However, I am looking to enhance the system by transforming the serv ...

javascripthtmlnode.jsnpm

Having trouble retrieving an Enum within an Angular template?

I am trying to use an enum to read a property of an array. However, I encountered an error with the following code: <ng-container *ngFor="let elem of list"> <div class="ui-g-12 ui-sm-12 ui-md-12 ui-lg-12 ui-xl-12"> &l ...

angulartypescriptenumsangular2-template

Spring MVC seems to be ignoring the static resources specified in the HTML files

Currently, I am in the process of creating a straightforward Spring MVC (v4.1.2) and Angular4 application. Essentially, this application performs CRUD operations by sending HTTP requests from the Angular client. The following combination works seamlessly ...

javaspringangular

My index.html not successfully linking to the CSS file

I'm new to this and still learning, so please bear with me. I'm having trouble linking my CSS file to my index.html document in order to create a black banner at the top of the page. I've tried opening it in both Chrome and Explorer but noth ...

htmlcssindexingstylesheet

angular2: The element 'Validators' is not recognized

When working with Angular2, I encountered an error in Visual Studio Code that is displayed with the following message: enter image description here Here is the content of my tsconfig.json file: { "compilerOptions": { "target": "es5", "module" ...

angulartypescript

What's the best way to customize the dropdown icon in Bootstrap 5?

Is there a way to customize the default icon in the Bootstrap 5 dropdown menu and replace it with a Font Awesome character? I have gone through the documentation, but it didn't provide any helpful information. I also attempted to override the CSS styl ...

csstwitter-bootstrapfont-awesomebootstrap-5

Tips for keeping a div fixed at a specific scroll level

Is there a way to keep a specific side div fixed at a particular scroll level, similar to the "How to format" bar on the right side of the Stack Overflow ask question page? You can see it when you try asking a question. How can this be achieved - with CS ...

jqueryhtmlcss

Transforming Observable of Observable of boolean into just Observable of boolean in CanActivate

I am encountering an issue with my user settings page where only the owner should have access. I am trying to use CanActivate to enforce this restriction, but I am facing a problem. CanActivate expects the output to be either boolean or an observable of ...

angularobservableangular2-observablescanactivate

Ensuring the positioning of input fields and buttons are in perfect alignment

I've been struggling to align two buttons next to an input field, but every time I try, I end up messing everything up. I managed to align an input field with a single button, but adding a second button is proving to be quite difficult. Here is ...

htmlcssangularjs

Alignment of Bootstrap 5 card text and buttons

I've been diving into the BootStrap 5 Crash Course from this YouTube link: https://www.youtube.com/watch?v=4sosXZsdy-s. The final website from the tutorial can be found here: One specific part focuses on using Cards, but I'm facing an issue wher ...

htmlcssbootstrap-5

Refreshing and Enhancing a Node Application on Azure

In our setup, we are running a node app using the express framework and have multiple proxies in place within a Web Apps service with 4 available slots. I am curious to know if it is achievable to initiate an npm update without the need to push any new co ...

node.jsazureexpressnpmazure-web-app-service

The babel JS file is unable to locate the "@babel/runtime/helpers/builtin/classCallCheck" module

Everything was running smoothly on my project until I mistakenly deleted the node_modules folder and attempted to reinstall npm packages. Encountering the following error: ./node_modules/react-event-listener/dist/react-event-listener.cjs.js Module not fo ...

reactjsnpmbabeljsnode-modulesadmin-on-rest

Execute npm command to install unhandled rejections package

I'm trying to understand why the command npm install is no longer functioning properly on an Ubuntu 14 LTS machine. The project in question is based on nuxt, and interestingly, npm install runs smoothly on a Unix-based system. In my attempts to trou ...

node.jsgitnpm