2017-12-29 199 views
10

Próbuję użyć bootstrap 4 przy mojej instalacji kątowej. Zabrakło mi KMP zainstalować flagą --save bootstrap @ obok ale mam przerwę w czasie wykonywania:BrowserslistError: Nieznana przeglądarka główna

./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 

może ktoś pomóc proszę?

+2

otrzymuję problem z ostatecznym Verison z „@ ng- "bootstrap": "^ 4.0.0", –

Odpowiedz

12

Problem może polegać na tym, że masz najnowszą wersję z pewnym błędem. Zauważyłem, że przyczyną tego problemu jest [email protected], ale nie jest to [email protected] Sprawdź, czy twój jest taki sam. Spróbuj odinstalować to i uruchomić coś w określonej wersji.

npm install [email protected]

ten rozwiązany mój problem.

+0

Trzymam się najnowszej wersji. Jako tymczasowe obejście dodałem style ładowania początkowego w nagłówku index.html, ale zachowałem elementy javascript w .angular-cli.json. – yonexbat

+0

dzięki temu działało również –

6

Pojawia się nowa wersja Bootstrap, która jest wersją 4.0.0-beta.2, a pakiet.json ma wartość^bootstrap4.0.0-alpha.6, więc nowa wersja bootstrap wymaga zależności od przeglądarki.

Aby uruchomić aplikację usunąć najnowszą wersję tag (^) & run KMP zainstalować komenda

+1

dzięki człowiekowi. zaoszczędziłem mój czas. – mhndev

0

był o sam problem zmieniłem w zależności od tego 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" 
    } 

do (zmiana "bootstrap" "4.0.0-beta.2" do stabilnej wersji)

"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" 
    }, 

następnie uruchom: npm zainstalować ng służyć

problem rozwiązany. !!

-1

Działa teraz bez obejścia z Angular CLI: 1.6.5. Angularny interfejs CLI jest zależny od niekompatybilnej wersji automatycznej poprawki (https://github.com/angular/angular-cli/issues/9020)

Sprawdź wersję, wpisując ng --version. Nie foget zaktualizować zależność dev w package.json:

"@angular/cli": "1.6.5", 
+0

Używam cli v 1.6.5 & bootstrap 4.0.0 i to nie działa dla mnie – Maciek

+0

Wersja lokalna i globalna? Najnowsza wersja pliku node.js? – yonexbat

+0

lokalne i globalne wersje kątowe/cli były 1.6.5, węzeł był w wersji 6.11 Wierzę, – Maciek

3

Dla Bootstrap 4.0.0 (release) muszę uaktualnić CLI do 1.6.5 - i to działa!

"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" 
    } 
-1

Dla tych nadal występują problemy:

ręcznie usunąć link do bootsrap CSS z kątowym-cli.json

"styles": 
    [ 
    **"../node_modules/bootstrap/dist/css/bootstrap.min.css",** 
    "../node_modules/font-awesome/css/font-awesome.min.css",  
    "styles.css" 
    ] 
+0

to działa, ale jak sprawić, aby działał bez usuwania – Pascal