Angular 4: Comment inclure Bootstrap?

113

Je suis un développeur backend et je joue juste avec Angular4. J'ai donc fait ce tutoriel d'installation: https://www.youtube.com/watch?v=cdlbFEsAGXo .

Compte tenu de cela, comment puis-je ajouter bootstrap à l'application afin que je puisse utiliser la classe "container-fluid" ou "col-md-6" et des trucs comme ça?

Joschi
la source
Voir: coderjony.com/blogs/…
Ankush Jain

Réponses:

179
npm install --save bootstrap

ensuite, dans angular-cli.json (dans le dossier racine du projet), recherchez styleset ajoutez le fichier css bootstrap comme ceci:

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

MISE À JOUR:
dans angulaire 6+ a angular-cli.json été changé en angular.json.

Egor Stambakio
la source
2
Cela fonctionne également, mais je suppose que stackoverflow.com/questions/37649164/ ... est celui avec lequel je devrais aller. Merci pour votre réponse!
Joschi
4
Comment ajouter bootstarp js et jquery js?
Ravi Ji
6
Pour mettre les js vous devez aller dans angular-cli.json et mettre "scripts": ["../node_modules/bootstrap/dist/js/bootstrap.min.js"], et vous avez le js
D4IVT3
2
Pouvez-vous m'expliquer pourquoi ../node_modules [...]? Pour moi, cela devrait être juste /node_modules [...].
Vinicius Brasil
2
@vnbrs c'est un chemin relatif à index.html. Si vous créez une application à l'aide de cli angulaire, votre index.html se situe par ./srcrapport à la racine de l'application. Si votre configuration est différente, vous pouvez ajuster le chemin en conséquence.
Egor Stambakio
100

Regardez la vidéo ou suivez l'étape

Installez le bootstrap 4 dans angulaire 2 / angulaire 4 / angulaire 5 / angulaire 6

Il existe trois façons d'inclure bootstrap dans votre projet
1) Ajouter un lien CDN dans le fichier index.html
2) Installer bootstrap à l'aide de npm et définir le chemin dans angular.json Recommandé
3) Installer bootstrap à l'aide de npm et définir le chemin dans le fichier index.html

Je vous ai recommandé de suivre 2 méthodes installées bootstrap à l'aide de npm car il est installé dans votre répertoire de projet et vous pouvez facilement y accéder

Méthode 1

Ajoutez le chemin CDN Bootstrap, Jquery et popper.js à votre fichier angular project index.html

Bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css "
Bootstrap.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap. min.js "
Jquery.js
https://code.jquery.com/jquery-3.2.1.slim.min.js
Popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12 .9 / umd / popper.min.js

Méthode 2

1) Installez bootstrap en utilisant npm

npm install bootstrap --save

après l'installation de Bootstrap 4, nous avons besoin de deux autres packages javascript qui sont Jquery et Popper.js sans ces deux packages bootstrap n'est pas terminé car Bootstrap 4 utilise le package Jquery et popper.js, nous devons donc également installer

2) Installez JQUERY

npm install jquery --save

3) Installez Popper.js

npm install popper.js --save

Maintenant, Bootstrap est installé sur votre répertoire de projet dans le dossier node_modules

ouvrez angular.json ce fichier est disponible sur votre répertoire angular ouvrez ce fichier et ajoutez le chemin des fichiers bootstrap, jquery et popper.js dans les chemins styles [] et scripts [] voir l'exemple ci-dessous

"styles": [   
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],
  "scripts": [  
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

Remarque: ne modifiez pas une séquence de fichier js, cela devrait ressembler à ceci

Méthode 3

Installez bootstrap à l'aide de npm suivez la méthode 2 de la méthode 3, nous définissons simplement le chemin dans le fichier index.html au lieu du fichier angular.json

bootstrap.css

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css">

Jquery.js

<script src="node_modules/jquery/dist/jquery.min.js"><br>

Bootstrap.js

<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"><br>

Popper.js

<script src="node_modules/popper.js/dist/umd/popper.min.js"><br>

Maintenant Bootstrap fonctionne bien maintenant

Mohammad Faisal
la source
8
Angular6: le fichier .angular-cli.json s'appelle maintenant angular.json. Et le chemin n'est plus "../ node_modules ...", mais plutôt: "node_modules / ..." Cheers
Karthik Prabuddha
J'ai complètement oublié d'ajouter les scripts dans angular.json et je me demandais pourquoi les composants jquery ne faisaient pas leur travail. Merci de me le rappeler!
AdminAffe
1
Que fait l'ajout de bootstrap aux scripts dans angular.json? Devez-vous toujours l'inclure via "<link rel ..." partout où vous voulez l'utiliser?
Jens Mander
Merci, il est incroyable de voir combien de sources manquent cette information, en particulier le peu sur popper
Avi E. Koenig
42

Afin de configurer / intégrer / utiliser Bootstrap en angular, nous devons d'abord installer le package Bootstrap en utilisant npm.

Installer le paquet

$ npm install bootstrap@4.0.0-alpha.6 --save   // for specific version
or
$ npm install bootstrap --save   // for latest version

Remarque: la commande --save enregistrera la dépendance dans notre application angulaire dans le fichier package.json.

Maintenant que le package est installé avec l'étape ci-dessus, nous pouvons maintenant indiquer à Angular CLI qu'il doit charger ces styles en utilisant l'une des options ci-dessous ou les deux:

option 1) Ajout dans le fichier src / styles.css

nous pouvons ajouter les dépendances comme indiqué ci-dessous:

@import "~bootstrap/dist/css/bootstrap.min.css";

Option 2) Ajout dans angular-cli.json ou angular.json

Nous pouvons ajouter les fichiers de style css dans le fichier angular-cli.json ou angular.json qui se trouve dans le dossier racine de notre application angulaire, comme indiqué ci-dessous:

"styles": [
   "../node_modules/bootstrap/dist/css/bootstrap.min.css",
   "styles.css"
]
Vishal Biradar
la source
Je voulais publier une réponse comme celle-ci, mais comme c'est déjà là, je vais simplement voter pour. Bravo monsieur. J'ajouterais simplement que dans la dernière version d'angular 7, il n'y a pas angular-cli.json mais plutôt angular.json.
Игор Рајачић
Dans l'option 2, le chemin d'accès css qui fonctionnait pour moi était "./node_modules/bootstrap/dist/css/bootstrap.min.css",
Murtuza
@ ИгорРајачић à quel niveau dois-je l'ajouter dans le fichier json, pouvez-vous s'il vous plaît donner un exemple de lien?
Kuldeep Yadav
1
@KuldeepYadav fichier angular-cli.json ou angular.json qui se trouve dans le dossier racine de notre application angulaire
Vishal Biradar
12

Angular 4 - Configuration de Bootstrap / @ ng-bootstrap

Installez d'abord bootstrap dans votre projet en utilisant la commande ci-dessous:

npm install --save bootstrap

Ajoutez ensuite cette ligne "../node_modules/bootstrap/dist/css/bootstrap.min.css" au fichier angular-cli.json (dossier racine) dans les styles

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

Après avoir installé les dépendances ci-dessus, installez ng-bootstrap via:

npm install --save @ng-bootstrap/ng-bootstrap

Une fois installé, vous devez importer le module principal.

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

Après cela, vous pouvez utiliser tous les widgets Bootstrap (ex. Carrousel, modal, popovers, info-bulles, onglets, etc.) et plusieurs goodies supplémentaires (datepicker, note, timepicker, typeahead).

Hidayt Rahman
la source
9

Dans Angular4, lorsque vous traitez avec le système @types , vous devez faire les choses suivantes,

Faire,

1) npm install --save @types/jquery
2) npm install --save @types/bootstrap

tsconfig.json

recherchez le tableau de types et ajoutez des entrées jquery et bootstrap ,

"types": [
      "jquery",
      "bootstrap",  
      "node"
]

Index.html

dans la section head, ajoutez les entrées suivantes,

  <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="node_modules/jquery/dist/jquery.min.js "></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.js "></script>

Et commencez à utiliser jquery et bootstrap à la fois.

micronyques
la source
Après avoir pris la construction en production, les liens génèrent une erreur dans la console du navigateur
Vignesh
@Vignesh a besoin de voir le problème. c'est difficile de dire quoi que ce soit.
micronyks
C'est probablement parce que les fichiers de votre dossier node_modules ne sont pas automatiquement servis aux clients. Au lieu de cela, ajoutez les styles et les scripts au .angular-cli.jsonfichier, ce qui indique à Angular de les regrouper avec le reste et de les servir aux clients.
Noxxys
6

Si vous utilisez Sass / Scss, suivez ceci,

Faire l'installation de npm

npm install bootstrap --save

et ajoutez une importdéclaration à votre fichier sass / scss,

@import '~bootstrap/dist/css/bootstrap.css'
Mohammed Safeer
la source
6

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!

Shelake surekha
la source
5

Testé dans Angular 7.0.0

Étape 1 - Installez les dépendances requises

npm install bootstrap (si vous voulez une version spécifique, veuillez spécifier le numéro de version.)

npm install popper.js (si vous voulez une version spécifique, veuillez indiquer le numéro de version)

npm installer jquery

Versions que j'ai essayées:

"bootstrap": "^4.1.3",
"popper.js": "^1.14.5",
"jquery": "^3.3.1",

Étape 2: Spécifiez les bibliothèques dans l'ordre ci-dessous dans angular.json. Dans le dernier angular, le nom du fichier de configuration est angular.json et non angular-cli.json

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/client",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
             "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },
Code-EZ
la source
3

Pour bootstrap 4.0.0-alph.6

npm install bootstrap@4.0.0-alpha.6 jquery tether --save

Ensuite, après que cela soit fait, exécutez:

npm install

Maintenant. Ouvrez le fichier .angular-cli.json et importez bootstrap, jquery et tether:

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

Et maintenant. Vous êtes prêt à partir.

Budi Salah
la source
2

Comme je peux le voir, vous avez déjà beaucoup de réponses, mais vous pouvez essayer cette méthode.

Sa meilleure pratique de ne pas utiliser jquery en angular, je préfère https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md méthode pour installer bootstrap sans utiliser bootstrap js qui dépend de jquery.

npm install ngx-bootstrap bootstrap --save

or

ng add ngx-bootstrap   (Preferred)

Gardez votre code jquery gratuit en angular

Rakesh Roy
la source
1

Exécutez la commande suivante dans votre projet, c'est-à-dire npm install [email protected] --save

Après avoir installé la dépendance ci-dessus, exécutez la commande npm suivante qui installera le module d'amorçage npm install --save @ ng-bootstrap / ng-bootstrap

Vérifiez ceci pour la référence - https://github.com/ng-bootstrap/ng-bootstrap

Ajoutez l'importation suivante dans app.module import {NgbModule} à partir de '@ ng-bootstrap / ng-bootstrap'; et ajoutez NgbModule aux importations

Dans votre stye.css @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Jinesh
la source
1

Étape 1: npm installe bootstrap --save

Étape: 2: Collez le code ci-dessous dans angular.json node_modules / bootstrap / dist / css / bootstrap.min.css

Étape 3: ng serve

entrez la description de l'image ici

Abdullah Pariyani
la source
2
Après avoir ajouté le bootstrap au projet, redémarrez votre serveur
Gangani Roshan
0

ajouter dans angular-cli.json

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

Ce sera du travail, je l'ai vérifié.

aimprogman
la source
0

Si vous souhaitez utiliser bootstrap en ligne et que votre application a accès à Internet, vous pouvez ajouter

@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');

Dans votre fichier principal style.css. et c'est le moyen le plus simple.

Référence: angular.io

Remarque. Cette solution charge le bootstrap à partir du site Web unpkg et doit avoir un accès Internet.

Arash
la source
0

CLI angulaire 6, faites simplement:

ng add @ ng-bootstrap / schematics 

Brian
la source
0

Pour installer la dernière version, utilisez $ npm i --save bootstrap @ next

diayn geogiev
la source
0

installez d'abord bootstrap dans votre projet en utilisant npm, npm i bootstrap puis ouvrez le fichier ur style.css dans votre projet et ajoutez cette ligne

@import "~bootstrap/dist/css/bootstrap.css";

et c'est tout bootstrap ajouté dans votre projet

AAshish jha
la source
0

| * | Installation de Bootstrap 4 pour Angular 2, 4, 5, 6 +:

| +> Installer Bootstrap avec npm

npm install bootstrap --save

npm install popper.js --save

| +> Ajouter des styles et des scripts à angular.json

"architect": [{
    ...
    "styles": [
        "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "src/styles.scss"
    ],
    "scripts": [
        "node_modules/jquery/dist/jquery.js",
        "node_modules/popper.js/dist/umd/popper.min.js",
        "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]
    ...
}]
Sujay UN
la source
0

Si vous utilisez Angular 6+, ajoutez ce qui suit à angular.json :

"styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
          ],
Hamfri
la source
0

Ajout de la version actuelle 4 de bootsrap à angular:

1 / Vous devez d'abord installer ces derniers:

npm install jquery --save
npm install popper.js --save
npm install bootstrap --save

2 / Ajoutez ensuite les fichiers de script nécessaires aux scripts dans angular.json:

"scripts": [
  "node_modules/jquery/dist/jquery.slim.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
],
enter code here

3 / Enfin, ajoutez le CSS Bootstrap au tableau des styles dans angular.json:

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

vérifier ce lien

Amine Gabsi
la source