Angular 5 z Bootstrap 4 nie działa


Stworzyłem nowy projekt Angular 5. Następnie postępowałem zgodnie z podanymi instrukcjami

na stronie Angular CLI
https://github.com/angular/ang ... strap
GitHub, aby używać Bootstrap 4.0.0 z Angular 5.2.2. Używam programu ładującego npm install, aby zainstalować program ładujący. ale ja rozumiem...
Unknown error from PostCSS plugin. Your current PostCSS version is 
6.0.15, but autoprefixer uses 5.2.18. Perhaps this is the source of
the error below.......
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.min.css
Module build failed: BrowserslistError: Unknown browser major......
webpack: Failed to compile.

Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Poniżej znajduje się zrozumiała konsolidacja różnych samouczków, przez które przeszedłem. Pamiętaj, że zależy to od wersji, z których korzystasz.

1. Zamontuj cli kątowe
>
npm install -g @angular/cli


2. Tworzenie projektu Angular za pomocą wiersza poleceń Angular
>
ng new my-awesome-project


3. Zainstaluj zależności
>
Następnie
cd
w nowym projekcie i zainstaluj wymagane zależności:
npm install bootstrap --save
npm install jquery --save
npm install popper.js --save

A co z
popper.js
. Ta biblioteka jest używana przez Bootstrap. Jednak zdecydowanie powinieneś uruchomić
npm install popper.js --save
, ponieważ
popper
to kolejna biblioteka js dystrybuowana przez npm.
Oto moja obecna konfiguracja:
angular cli: 1.6.8
angular: ^5.2.0
bootstrap: ^4.0.0
jquery: ^3.3.1
popper.js: ^1.12.9


4. Integracja zależności w Twoim projekcie
>
Teraz, gdy masz już wszystkie zależności, będziesz musiał „podłączyć” do swojego projektu.
Otwórz plik
.angular-cli.json
i zaktualizuj sekcję
script
w następujący sposób:
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],

Na koniec otwórz
src \ styles.css
i dodaj:
@import "~bootstrap/dist/css/bootstrap.css";

Ostatnia operacja wymagana podczas uruchamiania projektu kątowego w trybie produkcyjnym.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

npm install bootstrap --save
Otwórz plik
.angular-cli.json
lub
angular.json
i zaktualizuj sekcję skryptu, jak pokazano w powyższych odpowiedziach.
Dodaj go również do swojego arkusza stylów:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
Jeśli to nie zadziała, otwórz
src \ styles.css
i dodaj:
@import "~bootstrap/dist/css/bootstrap.css";
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Użyj
npm install bootstrap
, aby zainstalować Bootstrap 4.0.0. Spójrz na siebie

Bootstrap
https://getbootstrap.com/
i jego

pakiet npm
https://www.npmjs.com/package/bootstrap
.
(Pakiet dla Bootstrap 3.3 to
bootstrap@3
https://getbootstrap.com/docs/3.3/getting-started/
)
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Upewnij się że masz,
1. Added the bootstrap.css file
2. Copied the fonts folder of bootstrap into the project
3. Added the file name in angularcli.json file
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

powinieneś uaktualnić do bootstrap beta zamiast używać bootstrap @ next
downgrade, aby pobrać wersję beta@4.0.2 dostępną na npm
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Bootstrap ma zależności popper i jquery. Zawsze dobrze jest zainstalować te moduły razem z bootstrapem.
npm install --save bootstrap@4 jquery@version popper@version

użycie --save dodaje te zależności do pliku package.json.
Następnie możesz przejść do angular.json (Angular 6 i cli v6) lub angular-cli.json (Angular 5 lub niższy i cli v1.7) i wstawić bootstrap css do modułów węzłów poniżej tablicy styles. I dodaj pliki jquery, popper i bootstrap.js w sekcji skryptów.
Mam nadzieję że to pomoże!
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Możesz dodać ngbootstrap za pomocą polecenia

Ng add @ ng-bootstrap/schemics
podczas dodawania schematu doda import, czasami wygodnie jest mieć plik angular.json.

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się