Error with Bootstrap 4 at Angular 5

Question

I hit with the following problem in Angular while trying to install Bootstrap in its version 4:

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/bootstrap/dist/css/bootstrap.css
Module build failed: BrowserslistError: Unknown browser major
    at error (C:\wamp64\www\angular\emag2\node_modules\browserslist\index.js:37:11)
    at Function.browserslist.checkName (C:\wamp64\www\angular\emag2\node_modules\browserslist\index.js:320:18)
    at Function.select (C:\wamp64\www\angular\emag2\node_modules\browserslist\index.js:438:37)
    at C:\wamp64\www\angular\emag2\node_modules\browserslist\index.js:207:41
    at Array.forEach (<anonymous>)
    at browserslist (C:\wamp64\www\angular\emag2\node_modules\browserslist\index.js:196:13)
    at Browsers.parse (C:\wamp64\www\angular\emag2\node_modules\autoprefixer\lib\browsers.js:44:14)
    at new Browsers (C:\wamp64\www\angular\emag2\node_modules\autoprefixer\lib\browsers.js:39:28)
    at loadPrefixes (C:\wamp64\www\angular\emag2\node_modules\autoprefixer\lib\autoprefixer.js:56:18)
    at plugin (C:\wamp64\www\angular\emag2\node_modules\autoprefixer\lib\autoprefixer.js:62:18)
    at LazyResult.run (C:\wamp64\www\angular\emag2\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:277:20)
    at LazyResult.asyncTick (C:\wamp64\www\angular\emag2\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:192:32)
    at LazyResult.asyncTick (C:\wamp64\www\angular\emag2\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (C:\wamp64\www\angular\emag2\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:204:22)
    at processing.Promise.then._this2.processed (C:\wamp64\www\angular\emag2\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:231:20)
    at new Promise (<anonymous>)
 @ ./node_modules/bootstrap/dist/css/bootstrap.css 4:14-127
 @ multi ./node_modules/bootstrap/dist/css/bootstrap.css ./src/styles.css

What to do to fix?

Answer 1

This is due to a bug between the bootstrap version you are using and the Angular CLI has already been reported here: Bug boostrap >=4 and Angular CLI

One way to fix this is by changing the bootstrap version within your package.json file, I for example changed my version to "bootstrap": "3.3.7" dei um npm install e depois um ng serve, It worked normally, I do not know what the latest functional version, but this 3 is meeting me normally, it is up to you to look for the latest version until the functional moment with CLI.

Answer 2

I managed to get Bootstrap 4 up and running smoothly in my Angular 5 project. I don’t know if it solves your problem but these are the steps I took to incorporate Bootstrap into my project:

1. I installed Bootstrap with the command npm install Bootstrap --save;
2. I added the entrance "../node_modules/bootstrap/dist/css/bootstrap.min.css" in the vector of "styles" in the file .angular-cli.json;
3. I added the entrance "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" in the vector of "scripts" in the file .angular-cli.json;

To add Jquery I used the same method, install via npm and add to file angular-cli.json.

---

Excerpt from my entries in packages.json:

(...)

  "dependencies": {
    "bootstrap": "^4.1.1"

(...)
  },
  "devDependencies": {
    "@angular/cli": "~1.7.4",
    "@angular/compiler-cli": "^5.2.0",

(...)

Answer 3

This is because there is a bug between the new version of angular-cli and the newer bootstrap. To fix the bug, you should:

1. Delete the node_modules directory
2. Remove the accent on the front of the application version in the package.josn of the line that has your bootstrap installed, leaving only "bootstrap": "4.0.0-beta.2"
3. Now run the command npm install

Now just compile and get ready!