Error with Bootstrap 4 in Angular 5

Question

Error with Bootstrap 4 in Angular 5

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (-1 votes)

0

I hit with the following problem in Angular when trying to install Bootstrap in 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 can I do to correct it?

front-end bootstrap-3 bootstrap-4 angular

asked by anonymous 19.01.2018 / 14:16

3 answers

How to use multi-component items in only one angle4 [closed] why does g ++ not compile the code that visual studio compiles?

score 0 · 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

p>

One way to fix this is by changing the bootstrap version inside your package.json file, for example I changed my version to bootstrap: "^ 3.3.7" I gave a npm install and then a ng serves, it worked normally, I do not know what the latest functional version, but this 3 is usually taking care of me, it's up to you to look for the latest version so far with the CLI.

score 0 · Answer 2

I was able to get Bootstrap 4 to run smoothly on my Angular 5 project. I do not know if it solved your problem but here are the steps I followed to incorporate Bootstrap into my project:

I installed Bootstrap with the command npm install Bootstrap --save ;

I added the entry "../node_modules/bootstrap/dist/css/bootstrap.min.css" in the vector of "styles" in file .angular-cli.json ;

I added the entry "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" no vector of "scripts" in file .angular-cli.json ;

To add Jquery I used the same method, install via npm and append to the 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",

(...)

score -1 · Answer 3

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

Delete the node_modules directory

Remove the accent on the front of the application version in the package.josn of the line that has its bootstrap installed, leaving only "bootstrap": "4.0.0-beta.2"

Now run the command npm install

Now just compile and ready!