Angular - 3 4 Configuration d'une application

Maintenant que notre projet Angular est créé, il est temps de le configurer. On commence par un peu de nettoyage dans le composant app pour partir de bases propres : on vide entièrement app.component.html et on supprime la propriété title dans app.component.ts. Le reste reste inchangé.

Installer Bootstrap

Pour donner un style correct à l'application sans passer trop de temps sur le CSS — l'objectif est de se concentrer sur Angular — j'ajoute Bootstrap. Depuis le dossier du projet, dans le terminal : 

npm install bootstrap

Cette commande installe Bootstrap dans node_modules et l'ajoute comme dépendance dans package.json. Mais il faut maintenant indiquer à la CLI d'inclure Bootstrap dans le bundle final : par défaut, elle ne le fait pas. On ouvre angular.json et on regarde la propriété styles, qui est un tableau des feuilles de style globales. On y trouve déjà styles.css ; on ajoute juste à côté le chemin vers Bootstrap. Il vaut mieux pointer vers la version minifiée :

  • chemin complet : node_modules/bootstrap/dist/css/bootstrap.min.css ;
  • résultat : Bootstrap est désormais empaqueté avec l'application au moment du build.

On lance ensuite ng serve pour démarrer le serveur local sur le port 4200 et on ouvre le navigateur. La page est vide — normal, on a tout supprimé. Pour vérifier que Bootstrap est bien chargé, on ajoute dans app.component.html une div avec la classe container, à l'intérieur une row, puis une colonne col-md-12 contenant un titre <h2>Bonjour tout le monde</h2>. À la sauvegarde, la CLI recompile et l'on voit immédiatement la typographie et l'espacement Bootstrap appliqués. L'application est correctement configurée ; dans la prochaine vidéo, nous commencerons à créer les composants planifiés.

En résumé

Cette leçon explique comment configurer une application Angular fraîchement créée pour un développement productif. Après avoir nettoyé le composant racine (app), on intègre Bootstrap pour bénéficier de styles CSS pré-définis sans se concentrer sur le design. On configure ensuite angular.json pour inclure Bootstrap dans le bundle final, puis on valide l'installation avec ng serve et quelques classes Bootstrap.

Points clés

  • Nettoyer le fichier app.component.html en supprimant tout contenu et supprimer la propriété title du composant TypeScript
  • Installer Bootstrap via npm install bootstrap et ajouter la dépendance au fichier package.json
  • Configurer angular.json en ajoutant le chemin node_modules/bootstrap/dist/css/bootstrap.min.css au tableau styles pour l'inclure globalement
  • Lancer l'application avec ng serve sur le port 4200 pour compiler et tester les changements en direct
  • Utiliser les classes Bootstrap (container, row, col-md-12) pour vérifier que les styles sont correctement appliqués

Questions fréquentes

Pourquoi ajouter Bootstrap dans angular.json plutôt que directement dans le HTML ?

Parce que angular.json centralise toutes les feuilles de style globales du projet. Angular CLI inclut automatiquement ces fichiers dans le bundle final, ce qui est plus maintenable qu'une importation manuelle en HTML qui pourrait être oubliée lors d'une refactorisation.

Faut-il utiliser bootstrap.min.css ou bootstrap.css ?

Il est préférable d'utiliser bootstrap.min.css (version minifiée) car elle réduit la taille du fichier transmis au navigateur, ce qui améliore les performances de l'application.

Peut-on démarrer l'application avec npm start au lieu de ng serve ?

Cela dépend de la configuration du projet. Généralement, ng serve est la commande recommandée pour le développement avec Angular CLI, car elle compile et lance le serveur de développement avec hot-reload automatique.