Pour les étapes de détail ci-dessous et un exemple de travail, vous pouvez visiter
https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/
Étapes très détaillées avec une explication appropriée.
Étapes:
installation de Bootstrap à partir de NPM
Ensuite, nous devons installer Bootstrap. Changez le répertoire du projet que nous avons créé (cd angular-bootstrap-example) et exécutez la commande suivante:
Pour Bootstrap 3:
npm install bootstrap --save
Pour Bootstrap 4 (actuellement en version bêta):
npm install bootstrap@next --save
OU
Alternative: CSS Bootstrap local
Comme alternative, vous pouvez également télécharger le CSS Bootstrap et l'ajouter localement à votre projet. J'ai téléchargé Bootstrap à partir du site Web et créé un dossier styles (même niveau que styles.css):
Remarque:
ne placez pas vos fichiers CSS locaux dans le dossier des ressources. Lorsque nous faisons la construction de production avec Angular CLI, les fichiers CSS déclarés dans le .angular-cli.json seront minifiés et tous les styles seront regroupés dans un seul styles.css. Le dossier assets est copié dans le dossier dist pendant le processus de construction (le code CSS sera dupliqué). Placez vos fichiers CSS locaux sous les actifs uniquement au cas où vous les importeriez directement dans le fichier index.html.
Importation du CSS
1.Nous avons deux options pour importer le CSS de Bootstrap qui a été installé à partir de NPM:
texte fort 1: Configurez .angular-cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
2: Importez directement dans src / style.css ou src / style.scss:
@import '~bootstrap/dist/css/bootstrap.min.css';
Personnellement, je préfère importer tous mes styles dans src / style.css car il a déjà été déclaré dans .angular-cli.json.
3.1 Alternative: CSS Bootstrap local
Si vous avez ajouté le fichier CSS Bootstrap localement, importez-le simplement dans .angular-cli.json
"styles": [
"styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
"styles.scss"
],
ou
src / style.css
@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';
4: Composants JavaScript Bootstrap avec ngx-bootstrap (Option 1)
Si vous n'avez pas besoin d'utiliser les composants JavaScript Bootstrap (qui nécessitent JQuery), c'est toute la configuration dont vous avez besoin. Mais si vous avez besoin d'utiliser des modaux, un accordéon, un sélecteur de date, des info-bulles ou tout autre composant, comment pouvons-nous utiliser ces composants sans installer jQuery?
Il existe une bibliothèque de wrapper angulaire pour Bootstrap appelée ngx-bootstrap que nous pouvons également installer à partir de NPM:
npm install ngx-bootstrap --save
Remarque ng2-bootstrap et ngx-bootstrap sont le même package. ng2-bootstrap a été renommé en ngx-bootstrap après #itsJustAngular.
Si vous souhaitez installer Bootstrap et ngx-bootstrap en même temps lorsque vous créez votre projet Angular CLI:
npm install bootstrap ngx-bootstrap --save
4.1: Ajout des modules Bootstrap requis dans app.module.ts
Parcourez le ngx-bootstrap et ajoutez les modules nécessaires dans votre app.module.ts. Par exemple, supposons que nous souhaitons utiliser les composants Dropdown, Tooltip et Modal:
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [
BrowserModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot()
],
// ...
})
export class AppBootstrapModule {}
Comme nous appelons la méthode .forRoot () pour chaque module (en raison des fournisseurs de modules ngx-bootstrap), les fonctionnalités seront disponibles dans tous les composants et modules de votre projet (portée globale).
Comme alternative, si vous souhaitez organiser le ngx-bootstrap dans un module différent (juste à des fins d'organisation au cas où vous auriez besoin d'importer de nombreux modules bs et ne voudriez pas encombrer votre app.module), vous pouvez créer un module app-bootstrap.module.ts, importez les modules Bootstrap (en utilisant forRoot ()) et déclarez-les également dans la section exports (afin qu'ils deviennent également disponibles pour d'autres modules).
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [
CommonModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot()
],
exports: [BsDropdownModule, TooltipModule, ModalModule]
})
export class AppBootstrapModule {}
Enfin, n'oubliez pas d'importer votre module d'amorçage dans votre app.module.ts.
import {AppBootstrapModule} depuis './app-bootstrap/app-bootstrap.module';
@NgModule({
imports: [BrowserModule, AppBootstrapModule],
// ...
})
export class AppModule {}
ngx-bootstrap fonctionne avec Bootstrap 3 et 4. Et j'ai aussi fait quelques tests et la plupart des fonctionnalités fonctionnent également avec Bootstrap 2.x (oui, j'ai encore du code hérité à maintenir).
J'espère que cela aidera quelqu'un!
