Angular - 1.8 Ajouter Bootstrap à votre projet Angular

Pour mettre en forme l'application sans écrire tout le CSS, on utilise Bootstrap, une bibliothèque de styles. Cette leçon montre comment l'installer dans le projet, puis comment la rendre disponible pour Angular. Le style global de l'application se définit ensuite dans le fichier styles.css.

Installer Bootstrap dans le projet

Depuis le dossier du projet, lancez la commande ci-dessous. Bootstrap est installé localement, dans le projet et non de façon globale. Les fichiers sont stockés dans le dossier node_modules.

npm install bootstrap

Déclarer le fichier CSS dans angular.json

Le fichier angular.json configure le projet. Dans le tableau styles, ajoutez le chemin du fichier bootstrap.min.css avant le fichier styles.css. Vérifiez qu'il n'y a aucune faute de frappe dans ce chemin. La configuration par défaut du projet suffit pour le reste du cours.

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

Vérifier que Bootstrap est chargé

Enregistrez angular.json, puis relancez le serveur pour charger la nouvelle configuration. Ouvrez les outils de développement du navigateur. Dans l'onglet Éléments, la section head montre que styles.css est importé. Dans les sources, le fichier styles.css mentionne Bootstrap, ce qui confirme que la bibliothèque est incluse.

ng serve

En résumé

Bootstrap s'installe dans le projet avec npm. Son fichier CSS est déclaré dans angular.json, avant styles.css. Après avoir relancé ng serve, les outils de développement confirment que la bibliothèque est chargée.

Points clés

  • npm install bootstrap installe la bibliothèque dans le projet.
  • Le fichier angular.json indique à Angular quels styles charger.
  • Le chemin du fichier CSS de Bootstrap doit être exact.
  • styles.css reste le fichier des styles globaux de l'application.
  • Relancer ng serve applique la nouvelle configuration.

Questions fréquentes

Pourquoi installer Bootstrap localement et non globalement ?

La bibliothèque est installée dans le dossier du projet, et non sur toute la machine. Elle est ainsi disponible pour cette application.

Comment vérifier que Bootstrap est bien inclus ?

Ouvrez les outils de développement, puis regardez la section head dans l'onglet Éléments et le fichier styles.css dans les sources.

Où écrire les styles qui s'appliquent à toute l'application ?

Dans le fichier styles.css. Ce fichier est utilisé par chaque composant Angular.