web-dev-qa-db-fra.com

Angular 5 avec Bootstrap 4 ne fonctionne pas

J'ai créé un nouveau projet Angular 5. Après cela, j'ai suivi les instructions données sur la page Angular CLI GitHub Pour utiliser Bootstrap 4.0.0 avec Angular 5.2.2. J'utilise 'npm install bootstrap' pour installer bootstrap. mais je reçois ...

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

Ce qui suit est une consolidation compréhensible de divers tutoriels que j'ai parcourus. N'oubliez pas que cela dépend des versions que vous utilisez.

1. Installez le cli angulaire

npm install -g @angular/cli

2. Créer un projet angulaire en utilisant cli angulaire

ng new my-awesome-project

3. Installer les dépendances

Ensuite, cd dans votre nouveau projet et installez les dépendances requises:

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

Que dire de popper.js. Cette bibliothèque est utilisée par Bootstrap. Cependant, vous devez exécuter précisément npm install popper.js --save car popper est une autre bibliothèque js distribuée par npm.

Voici ma configuration actuelle:

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

4. Intégrez les dépendances à votre projet

Maintenant que vous avez toutes vos dépendances, vous devrez "brancher" le bootstrap dans votre projet.

Ouvrez le fichier .angular-cli.json et mettez à jour la section script comme suit:

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

Enfin, ouvrez src\styles.css et ajoutez:

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

Dernière opération nécessaire lors de l’exécution d’un projet angulaire en mode de production.

13
avi.elkharrat

Utilisez npm install bootstrap pour installer Bootstrap 4.0.0. Jetez un oeil sur Bootstrap lui-même et son npm-package .

(Le paquet pour Bootstrap 3.3 est bootstrap@3 )

1
pzaenger

Assurez-vous que vous avez,

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

vous devez rétrograder vers une version bêta de bootstrap au lieu d'utiliser bootstrap@nextdongrade vers [email protected] version bêta disponible sur npm

0
niteshbisht

Bootstrap a une dépendance sur popper et jquery. C'est toujours une bonne idée d'installer ces modules avec bootstrap. 

npm install --save bootstrap@4 jquery@version popper@version

utiliser --save ajoute ces dépendances dans votre package.json. 

Ensuite, vous pouvez aller à angular.json (Angular 6 et cli v6) ou à angular-cli.json (Angular 5 ou inférieur et cli v1.7) et coller le css de bootstrap dans les modules de nœud sous le tableau de styles. Et ajoutez des fichiers jquery, popper et bootstrap.js sous des scripts.

J'espère que cela pourra aider!

0
Siddhartha Thota