web-dev-qa-db-de.com

Angular 5 mit Bootstrap 4 funktioniert nicht

Ich habe ein neues Angular 5-Projekt erstellt. Danach folgte ich den Anweisungen auf Angular auf der CLI-GitHub-Seite , Um Bootstrap 4.0.0 mit Angular zu verwenden. 5.2.2. Ich benutze 'npm install bootstrap', um bootstrap zu installieren. aber ich bekomme ...

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.
angularbootstrap-4angular5
4
Peter

Das Folgende ist eine verständliche Zusammenfassung verschiedener Tutorials, die ich durchlaufen habe. Bitte denken Sie daran, dass dies von den verwendeten Versionen abhängt.

1. Installieren Sie den Winkelcli

npm install -g @angular/cli

2. Erstellen Sie ein Projekt Angular mit Hilfe von angle cli

ng new my-awesome-project

3. Installieren Sie Abhängigkeiten

Als Nächstes cd in Ihrem neuen Projekt und installieren Sie die erforderlichen Abhängigkeiten:

npm install bootstrap --save
npm install jquery --save
npm install popper.js --save

Informieren Sie sich über popper.js. Diese lib wird von Bootstrap verwendet. Sie müssen jedoch npm install popper.js --save genau ausführen, da popper eine andere js lib ist, die von npm verteilt wird.

Hier ist meine aktuelle Konfiguration:

angular cli: 1.6.8
angular: ^5.2.0
bootstrap: ^4.0.0
jquery: ^3.3.1
popper.js: ^1.12.9

4. Integrieren Sie die Abhängigkeiten in Ihr Projekt

Jetzt, da Sie alle Ihre Abhängigkeiten haben, müssen Sie Bootstrap in Ihr Projekt "einbinden".

Öffnen Sie die .angular-cli.json-Datei und aktualisieren Sie den Abschnitt script wie folgt:

"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

Zum Schluss src\styles.css öffnen und hinzufügen:

@import "~bootstrap/dist/css/bootstrap.css";

Der letzte Vorgang, der erforderlich ist, wenn ein Winkelprojekt im Produktionsmodus ausgeführt wird.

13
avi.elkharrat

Verwenden Sie npm install bootstrap, um Bootstrap 4.0.0 zu installieren. Werfen Sie einen Blick auf Bootstrap selbst und sein npm-package .

(Das Paket für Bootstrap 3.3 lautet [email protected] )

1
pzaenger

Stell sicher dass du hast,

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
0
firstpostcommenter

sie müssen ein Upgrade auf eine Betaversion von Bootstrap durchführen, anstatt [email protected] auf [email protected] zu verwenden, die auf npm verfügbar ist

0
niteshbisht

Bootstrap ist abhängig von Popper und Jquery. Es ist immer eine gute Idee, diese Module zusammen mit bootstrap zu installieren. 

npm install --save [email protected] [email protected] [email protected]

mit --save werden diese Abhängigkeiten in package.json hinzugefügt. 

Dann können Sie zu angle.json (Angular 6 und cli v6) oder angle-cli.json (Angular 5 oder darunter und cli v1.7) gehen und die css des Bootstraps in Knotenmodule unter styles array einfügen. Fügen Sie die Dateien jquery, popper und bootstrap.js unter Skripts hinzu.

Hoffentlich hilft das!

0
Siddhartha Thota