angular-cli: BrowserslistError: Unknown browser major at error

Did you tried this? Same error and fixed by,

• From “bootstrap”: “^4.0.0-beta.2” to “bootstrap”: “4.0.0-beta.2”, take out “^”
• Then npm install
• Then ng serve

I was facing same issue. I downgraded bootstrap with following steps. Uninstall bootstrap@4.0.0-beta.3: npm uninstall bootstrap --save Then installed bootstrap@4.0.0-beta.2: npm install bootstrap@4.0.0-beta.2 --save

I did not remove ^ because package-lock.json will handle it.

Step 1. Inside .angular-cli.json

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css" 
 ]

Remove "../node_modules/bootstrap/dist/css/bootstrap.min.css"

Step 2. Go to styles.css

Import bootstrap by adding this line @import "~bootstrap/dist/css/bootstrap.css";

These steps solved the errors I got during the building process.

bootstrap’s 4.0.0 beta 3 came out today. Might have to downgrade to their beta 2 again to make it work. I am running into the same issue.

You can use Bootstrap 4 beta 3, but first edit package.json in node_modules/bootstrap:

“browserslist”: [ “last 1 major version”, <----- delete this line “>= 1%”, <----- delete this line “Chrome >= 45”, “Firefox >= 38”, “Edge >= 12”, “Explorer >= 10”, “iOS >= 9”, “Safari >= 9”, “Android >= 4.4”, “Opera >= 30” ],

@SteveIngels Just tried the solution @mokth provided.

You’ll need to remove "../node_modules/bootstrap/dist/css/bootstrap.min.css" from .angular-cli.json. Then change "styles.css" to "styles.scss" in .angular-cli.json. Then change the actual file style.css to style.scss and add @import "../node_modules/bootstrap/scss/bootstrap.scss" to the top of the file.

@ekwebster "bootstrap": "^4.0.0-beta.2" the caret here means it will update you to the most recent version, just try yarn upgrade bootstrap@4.0.0-beta.2 or npm update bootstrap@4.0.0-beta.2

CLI 1.6.4 does not fix the problem.

The issue seems to be caused by this section of bootstrap’s package.json file

 "browserslist": [
    "last 1 major version",
    ">= 1%",
    "Chrome >= 45",
    "Firefox >= 38",
    "Edge >= 12",
    "Explorer >= 10",
    "iOS >= 9",
    "Safari >= 9",
    "Android >= 4.4",
    "Opera >= 30"
  ],

The autoprefixer plugin uses this list and unless you have a version 7.0 or higher it does not support the last n major version syntax.

Upgrading autoprefixer should fix the issue.

Removing the caret ‘^’ did solve the problem

Running into the same problem here.

1. change the style.css to scss (and all the css to scss also).
2. @import “…/node_modules/bootstrap/scss/bootstrap.scss”; --> put this in the first line of style.scss
3. remove the bootstrap.css or bootstrap.min.css at the angular-cli.json ng build --prod everything work accordingly. Thank guys…

I’m using bootstrap 4.0.0 with CLI v 1.6.3.

@import "~bootstrap/scss/bootstrap";

This worked for me.

This should be fixed on Angular CLIs side in the next release (1.6.4). That should be next week.

Changed cli version to 1.7.0 in package.json. Working as expected now.

I have the same error

The error persist only in production builds.

I have fixed my package.json to:

“bootstrap”: “4.0.0-beta.2” If you have an app at production environment I think the best practice is to use a stable and fixed version.

Steps:

1-Remove /node_modules 2-Fix the package.json file 3-Execute npm install 4-Enjoy!

Temp Fix

• change style.css file to style.scss
• change style.css reference in .angular-cli.json to style.scss
• in style.scss import @import ‘~bootstrap/scss/bootstrap.scss’;

Should work

@angular/cli: 1.7.0-rc.0 solved the problem

Bootstrap v4.0.0 has been released on Jan 18, 2018. So going to v4.0.0-alpha.x cannot be the best solution 😕

The same problem i faced today.

I found my CLI was not upgraded. I upgraded my CLI globally and locally and it worked fine. So always its good to upgrade our Angular CLI and then try to install packages.

Have the same problem.

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/bootstrap/dist/css/bootstrap.min.css
Module build failed: BrowserslistError: Unknown browser major
    at error (E:\notWork\angular4Course\directives-deep\node_modules\browserslist\index.js:37:11)
...

I just started to learn Angular, I don’t need bootstrap 4. I just want the simplest solution to make my project alive again. So I downgraded a bootstrap.

1. In package.json file I changed to "bootstrap": "3.3.7",
2. then run npm install
3. after that ng serve --open

Running into this issue as well trying to use the latest angular-cli “1.6.3” with the latest bootstrap “4.0.0-beta.2”.

Hi all! I read all of yours comment and after I follow most of logs that the npm leave on my console (after a boring fight with bootstrap), so I uninstall and reinstall: npm uninstall bootstrap --save subsequently npm install bootstrap@4.0.0-beta.2 --save so I see in the console: this warning:

npm WARN bootstrap@4.0.0-beta.2 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer depe ndencies yourself. npm WARN bootstrap@4.0.0-beta.2 requires a peer of popper.js@^1.12.3 but none is installed. You must install peer dep endencies yourself.

I follow the suggest, so npm install jquery@1.9.1 --save and npm install popper.js@^1.12.3 --save finally: npm install and ng serve and IT WORK!!!

I changed the path to bootstrap.scss @import “~ bootstrap / scss / bootstrap.scss”; in the styles.scss file. And solved this problem Also adding packages node-sass and sass-loader

i have removed following two line from bootstrap/package.json file

“last 1 major version”, “>= 1%”,

Installing angular cli 1.6.6 solve the problem for me!

cli 1.7.0-beta.1 fixes the issue when using the latest released bootstrap (4.0.0) (not beta) as well.

Simply upgrading to @angular/cli@1.7.0-beta.1 solved the problem for me, like @Jimeh87 proposed.

@filipesilva Yes using @angular/cli@1.7.0-beta.0 fix the issue.

CLI 1.6.4 fixed the problem for me.

still happening - also today had to specify beta 2 as 3 will produce same error as above

This does seem to be related to bootstrap@4.0.0-beta.3, and is also causing failures in our CI (https://travis-ci.org/angular/angular-cli/jobs/322676874).

update to ng cli 1.6.8 in project and global. works with bootstrap 4.0

@jglisson this solution uses scss instead of the plain bootstrap compiled css, and skips the angular-cli way of styles inclusion by directly importing it to the main styles.css file.

It certainly does not seem to be an appropriate fix.

Development builds were fixed. Production builds required additional changes which were already present but are only available in 1.7 (currently in beta). The stylesheet optimization pipeline was rewritten providing both increased performance and fixing multiple underlying issues. This however cannot be published in a patch release hence its presence in 1.7 and not 1.6.x.

Just upgrade from 4.0.0-beta to 4.0.0 and experienced this problem with ng serve. Went back to 4.0.0-beta and ng serve is ok. This issue shouldn’t be closed if it’s a cli issue.

@jameskentTX provided me with the workaround. Except the filename is package.json in the node_modules/bootstrap folder for me.

I have the same problem too.

@joseph-schenck solution solved my problem

I did the same as @yaswanth89kumar . I setup my project using angular-cli 1.4.10 and then upgraded the cli to latest.

Thanks @clydin

This may sound dumb then (and off topic, so I apologize). But how do you use ng new to create an angular 4 project with cli 1.5/6/7? I have been searching online quite a bit and the only thing I’ve found is using cli 1.4.10 (because 1.4.9 has an issue).

1.6.6 does not solves the issue !

I tried Bootstrap@4.0.0 with Angular CLI 1.6.6 (local and global), and it worked fine.

Just globally update your angular/cli before starting a new project: npm i -g @angular/cli It works with beta 3, too !

I upgraded to @angular/cli@1.7.0-beta.1, created a new project, added bootstrap@^4.0.0 and I was able to start the app with bootstrap.min.css plumbed in by adding it as an @import to my styles.css. I was also able to start my app by plumbing it in via the .angular-cli.json by adding it to the styles.

A gotcha here would be to make sure you upgrade your global and your app to @angular/cli to 1.7.0-beta.1 and double check that it actually upgraded by running ng --version (mine didn’t so I had to manually remove and reinstall it for some reason).

Can you try @angular/cli@1.7.0-beta.0 instead please? See https://github.com/angular/angular-cli/issues/9029#issuecomment-357267439 for more details.

Hi! I upgraded to release 1.6.4, but i’m always facing the problem, using bootstrap@4.0.0-beta.3. Unfortunately I need to use that version of bootstrap because it fixes another problem. I’ll try the workaround proposed some days ago, but I hope in a “cleaner” solution. Thank you for the support.

A workaround here on SO (https://stackoverflow.com/questions/48034051/bootstrap-4-beta-3-throws-error-with-angular-cli). Will need to re-run each time you upgrade, until the next version of CLI that updates autoprefixer to latest…

I downgraded bootstrap to “bootstrap@4.0.0-beta.2” and the app back to work again