Comment intégrer Bootstrap à une application Angular 4 ?

Le framework Angular peut être utilisé avec d'autres librairies en complément. Si vous utilisez une librairie JavaScript ou CSS, vous devez configurer le framework pour pouvoir le faire. C'est par exemple le cas de la librairie Bootstrap.

La première chose à faire est d'intégrer Bootstrap à votre plateforme. Si vous travaillez avec NodeJS, alors il est possible d'installer Bootstrap dans son projet avec le gestionnaire de paquets NPM.

npm install --save bootstrap

Si vous souhaitez alléger votre application ou votre site, vous pouvez utiliser le CDN de Bootstrap pour avoir une version en ligne des fichiers de la librairie. Les URL du CDN sont disponibles sur ce site : https://www.bootstrapcdn.com/.

Une fois Bootstrap récupérée, vous devez l'intégrer à Angular. Il faut pour cela modifier la configuration de votre projet. Le nom du fichier varie selon la version du Framework que vous utilisez. Avant la version 6, ce fichier se nomme "angular-cli.json". À partir de la version 6, le nom a changé en "angular.json". Dans la section "styles" du fichier, intégrez le chemin vers le fichier CSS de Bootstrap en plus de vos propres fichiers CSS.

"styles": [
   "chemin/vers/bootstrap/dist/css/bootstrap.min.css",
   "styles.css"
]

Si vous souhaitez utiliser les fonctionnalités JavaScript de Bootstrap, vous devez également intégrer le chemin vers le fichier JS de la librairie dans la section "Scripts". La partie de JavaScript de Bootstrap requiert JQuery pour fonctionner, vous devez donc également installer et configurer JQuery pour votre application.

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

Bootstrap