logo标签列表

BrowserslistError: 未知的浏览器主版本

javascriptangularbootstrap-4
17

我正在尝试在我的Angular应用中使用Bootstrap 4。我已经运行了npm install --save bootstrap@next，但是在运行时出现了错误:

./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","plugins":[null,null,null],"sourceMap":false}!./node_modules/bootstrap/dist/css/bootstrap.min.css
Module build failed: BrowserslistError: Unknown browser major
    at error (C:\xampp\htdocs\tick_master_angular\web\node_modules\browserslist\index.js:37:11)
    at Function.browserslist.checkName (C:\xampp\htdocs\tick_master_angular\web\node_modules\browserslist\index.js:320:18)
    at Function.select (C:\xampp\htdocs\tick_master_angular\web\node_modules\browserslist\index.js:438:37)
    at C:\xampp\htdocs\tick_master_angular\web\node_modules\browserslist\index.js:207:41
    at Array.forEach (native)
    at browserslist (C:\xampp\htdocs\tick_master_angular\web\node_modules\browserslist\index.js:196:13)
    at Browsers.parse (C:\xampp\htdocs\tick_master_angular\web\node_modules\autoprefixer\lib\browsers.js:44:14)
    at new Browsers (C:\xampp\htdocs\tick_master_angular\web\node_modules\autoprefixer\lib\browsers.js:39:28)
    at loadPrefixes (C:\xampp\htdocs\tick_master_angular\web\node_modules\autoprefixer\lib\autoprefixer.js:56:18)
    at plugin (C:\xampp\htdocs\tick_master_angular\web\node_modules\autoprefixer\lib\autoprefixer.js:62:18)
    at LazyResult.run (C:\xampp\htdocs\tick_master_angular\web\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:270:20)
    at LazyResult.asyncTick (C:\xampp\htdocs\tick_master_angular\web\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:185:32)
    at LazyResult.asyncTick (C:\xampp\htdocs\tick_master_angular\web\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:197:22)
    at processing.Promise.then._this2.processed (C:\xampp\htdocs\tick_master_angular\web\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:224:20)
    at LazyResult.async (C:\xampp\htdocs\tick_master_angular\web\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:221:27)
    at LazyResult.then (C:\xampp\htdocs\tick_master_angular\web\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:127:21)
 @ ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css 3:10-190
 @ ./src/styles.css
 @ multi ./src/styles.css

有人可以帮忙吗？

2
我遇到了一个问题，与最终版本的"@ng-bootstrap/ng-bootstrap": "^1.0.0"和"bootstrap": "^4.0.0"有关。 - Aniruddha Das
9个回答
14

问题可能是你获取到了某些有bug的最新构建版本。我注意到bootstrap@4.0.0-beta.3会导致这个问题，而bootstrap@4.0.0-beta.2则不会。请检查你的版本是否相同。尝试卸载它并运行特定版本的命令：

npm install bootstrap@4.0.0-alpha.6

以上操作解决了我的问题。

我坚持使用最新版本。作为临时解决方案，我在index.html的头部添加了bootstrap样式表，但保留了.angular-cli.json中的javascript内容。 - yonexbat
12

Bootstrap 新版本 v4.0.0-beta.2 已发布，而你的 package.json 中依赖的是 ^bootstrap4.0.0-alpha.6 版本，因此新版本需要浏览器列表依赖。

为了运行你的应用程序，请删除最新版本标签 (^) 并执行 npm install 命令。

7
对于Bootstrap 4.0.0（发布版），我需要将CLI升级到1.6.5，现在已经成功了！
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.9",
    "bootstrap": "4.0.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "popper.js": "^1.12.9",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.5",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
5
我已经升级到 Angular CLI 1.7.x 并且它开始运行良好。我推荐这个解决方案。我的意思是，升级 Angular CLI，它应该适用于你！
另一个解决方法是从 node_modules/bootstrap/package.json 文件中删除以下行：
"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"
],
我遇到了同样的问题，删除了“browserslist”元素后，问题得到了解决。 - Akash
2

我遇到了同样的问题，将package.json中的依赖项从以下内容更改：

"dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9",
    "bootstrap": "^4.0.0-beta.3",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "zone.js": "^0.8.14"
  }

升级“bootstrap”版本（从“4.0.0-beta.2”改为稳定版本）

"dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9",
    "bootstrap": "4.0.0-beta.2",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "zone.js": "^0.8.14"
  },

然后运行以下命令： npm install ng serve 问题解决了！！
0

我在使用Bootstrap 4.1.1时也遇到了同样的问题。解决方法是将Bootstrap版本更改为4.0.0-beta.2（不带插入符号）在package.json中，然后运行

npm install 
ng serve

并且在你的 style.css 文件中添加 import "~bootstrap/dist/css/bootstrap.css"。
0

Bootstrap 4不再使用CSS，而是使用SCSS。因此，您应该导入'~bootstrap/scss/bootstrap.scss'，而不是'~bootstrap/scss/bootstrap.css'。

-1

现在使用 Angular CLI: 1.6.5，无需解决方案即可正常工作。 Angular CLI 依赖于一个不兼容的 autoprefixer 版本 (https://github.com/angular/angular-cli/issues/9020)。

通过输入 ng --version 来验证版本。不要忘记在 package.json 中更新您的 dev 依赖项：

"@angular/cli": "1.6.5",
我正在使用 cli v 1.6.5 和 bootstrap 4.0.0，但这对我不起作用。 - Maciek
本地和全局版本？Node.js的最新版本是什么？ - yonexbat
本地和全局版本的Angular/CLI为1.6.5，Node.js版本为v6.11。 - Maciek
-1

对于仍然遇到问题的人：

手动从angular-cli.json中删除引导CSS的URL。

  "styles":
  [
    **"../node_modules/bootstrap/dist/css/bootstrap.min.css",**
    "../node_modules/font-awesome/css/font-awesome.min.css",    
    "styles.css"
  ]
这个可以工作，但如何使其在不删除的情况下正常工作？ - Pascal
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接