web-dev-qa-db-fra.com

angular-cli et bootstrap 4

Je fais mes premiers pas avec angular 2, en particulier avec un outil officiel angular-cli pour créer un nouveau projet.

J'ai créé un nouveau projet de cette façon

ng new [my-project-name]

Le projet a été créé correctement.

Après cela, je voudrais installer bootstrap 4 et suivre le guide officiel en page angular-cli.

J'installe bootstrap avec npm:

npm install bootstrap@next

et j'ajoute la ligne dans mon angular-cli.json:

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],
"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.css"
],

dans l'objet d'application.

Quand je construis l'application et que je l'exécute sur le serveur avec: ng serve

Je ne trouve pas dans index.html la référence pour bootstrap css et javascript.

Je ne comprends pas si l'importation de ce fichier est ajoutée automatiquement dans mon index.html ou si je dois l'ajouter manuellement.

angularangular-clibootstrap-4
8
user3790694

Lorsque vous ajoutez les entrées de scripts et de styles au fichier angular.cli.json, elles sont ajoutées à la portée globale. Plus précisément, ils sont ajoutés à scripts.bundle.js et styles.bundle.js. Il n'est pas nécessaire de les ajouter à index.html. Vous devriez pouvoir y aller après l’arrêt et le redémarrage de ng serve. Pour faire bonne mesure, je lance une reconstruction npm après avoir apporté des modifications à angular.cli.json.

6
Larry Popiel

Vous n'avez pas devez ajouter quelque chose manuellement dans le fichier HTML. C'est fait automatiquement pour vous. 

Voici pourquoi:

Vos styles CSS seront ajoutés au fichier styles.bundle.css. Vous verrez donc le lien suivant vers la feuille de style dans votre source HTML lorsque vous exécuterez l'application: <link href="styles.bundle.css" rel="stylesheet">. Si vous cliquez sur le styles.bundle.css dans le navigateur, tous les styles qu’il a compilés seront affichés. 

Une dernière chose (importante} _. Je vous suggère également de permuter l'ordre des feuilles de style de votre fichier angular-cli.json comme suit:

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "styles.css",
]

La raison de la modification ci-dessus est que vos fichiers sont compilés et servis dans l'ordre indiqué dans le fichier angular-cli.json. Alors disons que si vous avez écrit des styles personnalisés pour btn-primary dans styles.css, cela sera écrasé par bootstrap.css toujours et vous ne verrez jamais vos styles être appliqués dans l'interface utilisateur et vous ne pourrez pas comprendre ce qui ne va pas. 

Si vous permutez l'ordre de vos fichiers comme je le suggère, les styles d'amorçage seront chargés en premier, suivis de vos styles personnalisés, remplaçant ainsi les styles d'amorçage avec vos propres styles. Ce serait le seul correctif que vous auriez à faire dans votre cas maintenant et tout le reste devrait fonctionner sans problème, sans aucun effort de votre part.

5
Devner

Je ne comprends pas si l’importation de ce fichier est ajoutée automatiquement dans mon index.html ou si je dois l’ajouter manuellement.

Vous devez l'ajouter vous-même.

0
jmachnik