Having trouble with Angular 5 build due to issues with adding the bootstrap css file?

I have developed an application using angular 5, integrated ng-bootstrap, and now trying to link the bootstrap css file from node_modules: 

../node_modules/bootstrap/dist/css/bootstrap.min.css
. However, upon running the ng build command, I encountered the following error:

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./node_modules/bootstrap/scss/bootstrap.scss
Module build failed: BrowserslistError: Unknown browser major
    at error (/Users/***/dev/***/node_modules/browserslist/index.js:37:11)
    ..................................
    ..................................
    ..................................
    at new Promise (<anonymous>)
@ ./node_modules/bootstrap/scss/bootstrap.scss 4:14-164
@ multi ./node_modules/bootstrap/scss/bootstrap.scss ./src/styles.css

node version: 8.9.1

typescript version: 2.6.0

npm version: 5.5.1

angular version: 5.2.0

bootstrap version: ^4.0.0

ng-bootstrap version: "^1.0.0-beta.8

Do you have any insights on how to solve this issue?

cssangulartwitter-bootstrapng-bootstrap

Answer №1

When integrating Angular CLI with Bootstrap, it is crucial to have the following versions:

  • @angular/cli : 1.7.0
  • Bootstrap : 4.0.0

There was a significant change when Bootstrap 4.0.0 was launched, but the Angular CLI team resolved this issue with the release of version 1.7.0.

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

The relative positioning is currently being obstructed

Having some trouble using position:relative to shift my logo to the left of my webpage. Oddly, moving it 20px seems to have no effect, but shifting it by 300px downwards causes it to vanish completely. Here's a snippet of my current code: .container ...

cssflexbox

Is it possible for Azure static web apps to utilize Azure App Service as their backend?

Is it possible to have a Azure static web app communicate with an existing Azure app service in order for users to download a file generated by the app service? ...

angularazurecloudazure-appserviceazure-static-web-app

Is there an npm package that functions like Google's page translator?

Is there an npm package that serves a similar purpose to Google Page Translator? I've integrated it into my Angular project, but I'm curious if there is a version available as an npm package. Click here for image description ...

angularnpmgoogle-translate

Determine the specific table entry that was clicked on

Currently, I am working on developing a dynamic table that includes a button in one of its columns, which triggers a bootstrap modal. I'm a bit unsure on how to determine which button was clicked and how to populate the table accordingly. Admittedly, ...

javascriptcsstwitter-bootstrappug

using a CSS tag to vertically center text within an element

After using a tag and setting the background color, height, and width for my content, I decided to align the text in the center along the x-axis using text-align: center;. However, I am now trying to figure out how to align it in the middle along the y-ax ...

csshtmltags

Tips for showing a public image in-text when pasted on Skype or various social media platforms

As an avid user of Skype, I have discovered that when pasting a link into Skype (using the desktop app) such as a YouTube link, a thumbnail is displayed in the chat. This got me thinking about whether there is a specific class or area in my code, be it CS ...

phpcssskype

Creating a custom autocomplete search using Angular's pipes and input

Trying to implement an autocomplete input feature for any field value, I decided to create a custom pipe for this purpose. One challenge I'm facing is how to connect the component displaying my JSON data with the component housing the autocomplete in ...

javascriptjsonangulartypescriptinput

What are the steps for utilizing the skrollr library to manipulate text within a div without it being

I'm a beginner in html, css, and javascript and I'm trying to create my first one-page website using the skrollr library. However, I'm facing an issue where the content in my second div is not displaying properly and is hidden behind the fir ...

javascripthtmlcss

Adjusting the sensitivity of mousewheel and trackpad using JavaScript

I am currently utilizing CSS3 to smoothly move a div up and down based on the direction of scrolling. By monitoring the mouse wheel event, I can detect when a user scrolls down and trigger a CSS3 transition to slide the div up. However, I am encountering a ...

javascriptjqueryhtmlcss

Are Ternary operators and template literals in Angular2+ causing conflicts when used in tandem?

In my Angular template, I currently have a simple setup that uses string concatenation within interpolation. It looks like this: <h4>{{ myVar.property ? myVar.property + ' IS NOT NULL' : '' }}</h4> What I want to do is swit ...

angulartemplate-literalsangularjs-interpolate

I'm facing issues with Angular commands not functioning properly even after installing the Angular CLI and configuring the

Every time I attempt to create a new project using Angular CLI by typing: ng n app I encounter the following error message: C:\Users\Venkateshwarn M\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng: ...

javascriptnode.jsangularmongodbexpress

There seems to be an issue with d3js bar charts as they are not displaying on the screen and there

Recently, I started delving into the world of D3js and decided to try my hand at creating some bar charts. However, despite my efforts, the bar charts failed to display on the screen. <!DOCTYPE HTML> <html> <head> <title> My D3 Pra ...

javascripthtmlcssd3.js

Toggle div visibility with a click

Hello, I've created a mailbox with show/hide functionality on :hover. However, someone recently mentioned that this could be quite distracting for users. Since pure CSS doesn't allow me to achieve the same effect on :active, I'm wondering if ...

javascripthtmlcss

What are some ways to prevent popups from being hidden by CSS?

I encountered a problem with my popup that I created using pure CSS. When I move my mouse to the top or bottom of the window, the popup disappears. However, if my cursor is in the body area, the popup appears as intended. I have not used any JavaScript in ...

htmlcss

The CSS styling is not applying correctly to a particular page

Having a minor CSS issue here. I am attempting to change something for a specific page or post, like in the case of wanting to change the background color of the entry content of page number 2458. I've managed to get that working with the following co ...

css

What is the best way to split a Bootstrap col-md div in half vertically?

I am attempting to create the following layout using the Bootstrap grid system. Within a container <div class="row">, there are two divs occupying half of the width each (<div1> and <div2>). The height of <div1> will vary based on t ...

csstwitter-bootstrap

Bespoke HTML, CSS, JavaScript, and PHP website designs within the Wordpress platform

I am a beginner in the world of Wordpress, coming from a background of creating websites from scratch. Currently, I am working on a Wordpress template (Astra) and looking to create a custom page using HTML, CSS, JavaScript, and PHP from the ground up to ad ...

javascriptphphtmlcsswordpress

Having multiple template bindings on a single element is not possible. Please utilize only one attribute with the prefix "*" for </mat-header-cell>

I encountered the following error: ERROR in Can't have multiple template bindings on one element. Use only one attribute prefixed with * (" <mat-header-cell> <mat-cell *matCellDef="let order" class="{{orderColum ...

angularangular-materialmaterial-table

Showing fetched data from Firebase in an Ionic 3 HTML file

Looking for assistance on how to display data retrieved from my firebase database in my HTML file. I need help with organizing the data, starting with displaying customer user's data. Eventually, I want to make it clickable and put the user's dat ...

htmlangularfirebaseionic-frameworkfirebase-realtime-database

Identify the browser dimensions and implement CSS styling for all screen resolutions

I am currently facing an issue with a function that I have created to apply CSS changes to a menu based on browser resizing and different resolutions. The problem lies in the fact that my function does not seem to be correctly interpreted by the browser. W ...

javascriptjqueryhtmlcss