Angular 4: Comment inclure Bootstrap?

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?

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.

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

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"
]

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).

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.

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'

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!

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"
            ]
          },

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.

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

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";

É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

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é.

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.

CLI angulaire 6, faites simplement:

ng add @ ng-bootstrap / schematics 

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

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

| * | 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"
    ]
    ...
}]

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

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

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

vous travaillez avec cdn pour bootstrap et jquery ou installez bootstarp directement dans l'application avec:

npm install ngx-bootstrap --save

utilisez également https://ng-bootstrap.github.io/#/home , mais ce n'est pas approprié

https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a