Comment utiliser Bootstrap dans un projet Angular?

Je démarre ma première application Angular et ma configuration de base est terminée.

Comment puis-je ajouter Bootstrap à mon application?

Si vous pouvez donner un exemple, ce serait d'une grande aide.

Si vous utilisez Angular-CLI pour générer de nouveaux projets, il existe un autre moyen de rendre le bootstrap accessible dans Angular 2/4 .

1. Via l'interface de ligne de commande, accédez au dossier du projet. Ensuite , utilisez NPM installer bootstrap:
   $ npm install --save bootstrap. L' --saveoption fera apparaître bootstrap dans les dépendances.
2. Modifiez le fichier .angular-cli.json, qui configure votre projet. C'est dans le répertoire du projet. Ajoutez une référence au "styles"tableau. La référence doit être le chemin relatif du fichier d'amorçage téléchargé avec npm. Dans mon cas c'est:"../node_modules/bootstrap/dist/css/bootstrap.min.css",

Mon exemple .angular-cli.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "bootstrap-test"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

Le bootstrap devrait maintenant faire partie de vos paramètres par défaut.

Une intégration avec Angular2 est également disponible via le projet ng2-bootstrap : https://github.com/valor-software/ng2-bootstrap .

Pour l'installer, placez simplement ces fichiers dans votre page HTML principale:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Ensuite, vous pouvez l'utiliser dans vos composants de cette façon:

import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'my-app',
  directives: [Alert],
  template: `<alert type="info">ng2-bootstrap hello world!</alert>`
})
export class AppComponent {
}

Tout ce que vous avez à faire est d'inclure le css boostrap dans votre fichier index.html.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Une autre très bonne (meilleure?) Alternative consiste à utiliser un ensemble de widgets créés par l'équipe angular-ui: https://ng-bootstrap.github.io

Si vous prévoyez d'utiliser Bootstrap 4 qui est requis avec le ng-bootstrap de l'équipe angular-ui qui est mentionné dans ce fil, vous voudrez l'utiliser à la place (REMARQUE: vous n'avez pas besoin d'inclure le fichier JS):

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

Vous pouvez également référencer cela localement après l'exécution npm install [email protected] --saveen pointant sur le fichier dans votre styles.scssfichier, en supposant que vous utilisez SASS:

@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';

L'option la plus populaire consiste à utiliser une bibliothèque tierce distribuée en tant que package npm comme le projet ng2-bootstrap https://github.com/valor-software/ng2-bootstrap ou la bibliothèque Angular UI Bootstrap.

J'utilise personnellement ng2-bootstrap. Il existe de nombreuses façons de le configurer, car la configuration dépend de la façon dont votre projet Angular est construit. Ci-dessous, je poste un exemple de configuration basé sur le projet Angular 2 QuickStart https://github.com/angular/quickstart

Tout d'abord, nous ajoutons des dépendances dans notre package.json

    { ...
"dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",

    ...

    "bootstrap": "^3.3.7",
    "ng2-bootstrap": "1.1.16-11"
  },
... }

Ensuite, nous devons mapper les noms aux URL appropriées dans systemjs.config.js

(function (global) {
  System.config({
    ...
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      //bootstrap
      'moment': 'npm:moment/bundles/moment.umd.js',
      'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
...
  });
})(this);

Nous devons importer le fichier bootstrap .css dans index.html. Nous pouvons l'obtenir depuis le répertoire / node_modules / bootstrap sur notre disque dur (car nous avons ajouté la dépendance bootstrap 3.3.7) ou depuis le Web. Là, nous l'obtenons à partir du Web:

<!DOCTYPE html>
<html>
  <head>
    ...
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    ...
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Nous devrions éditer notre fichier app.module.ts à partir du répertoire / app

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

//bootstrap alert import part 1
import {AlertModule} from 'ng2-bootstrap';

import { AppComponent }  from './app.component';


@NgModule({
  //bootstrap alert import part 2
  imports:      [ BrowserModule, AlertModule.forRoot() ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Et enfin notre fichier app.component.ts du répertoire / app

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <alert type="success">
        Well done!
    </alert>
    `
})

export class AppComponent {

    constructor() { }

}

Ensuite, nous devons installer nos dépendances bootstrap et ng2-bootstrap avant d'exécuter notre application. Nous devrions aller dans notre répertoire de projet et taper

npm install

Enfin, nous pouvons démarrer notre application

npm start

Il existe de nombreux exemples de code sur github du projet ng2-bootstrap montrant comment importer ng2-bootstrap dans diverses versions de projet Angular 2. Il y a même un échantillon plnkr. Il existe également une documentation API sur le site Web de Valor-software (auteurs de la bibliothèque).

Dans un environnement angular-cli, le moyen le plus simple que j'ai trouvé est le suivant:

1. Solution dans un environnement avec des feuilles de style s̲c̲s̲s̲

npm install bootstrap-sass —save

Dans style.scss:

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

Remarque 1: Le ~caractère est une référence au dossier nodes_modules .
Note 2: Comme nous utilisons scss, nous pouvons personnaliser toutes les variables boostrap que nous voulons.

2. Solution dans un environnement avec des feuilles de style c̲s̲s̲

npm install bootstrap —save

Dans style.css:

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

Il existe plusieurs façons de configurer angular2 avec Bootstrap, l'un des moyens les plus complets pour en tirer le meilleur parti est d'utiliser ng-bootstrap, en utilisant cette configuration, nous donnons à algular2 un contrôle complet sur notre DOM, évitant le besoin d'utiliser JQuery et Boostrap .js.

1-Prenez comme point de départ un nouveau projet créé avec Angular-CLI et en utilisant la ligne de commande, installez ng-bootstrap:

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

Remarque: plus d'informations sur https://ng-bootstrap.github.io/#/getting-started

2-Ensuite, nous devons installer bootstrap pour le css et le système de grille.

npm install bootstrap@4.0.0-beta.2 --save

Remarque: plus d'informations sur https://getbootstrap.com/docs/4.0/getting-started/download/

Nous avons maintenant la configuration de l'environnement et pour cela nous devons changer le .angular-cli.json en ajoutant au style:

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

Voici un exemple:

"apps": [
    {
      "root": "src",
        ...
      ],
      "index": "index.html",
       ...
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ]

La prochaine étape consiste à ajouter le module ng-boostrap à notre projet, pour ce faire, nous devons ajouter sur app.module.ts:

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

Ajoutez ensuite le nouveau module à l'application d'application: NgbModule.forRoot ()

Exemple:

@NgModule({
  declarations: [
    AppComponent,
    AppNavbarComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Nous pouvons maintenant commencer à utiliser bootstrap4 sur notre projet angular2 / 5.

J'ai eu la même question et j'ai trouvé cet article avec une solution vraiment propre:

http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/

Voici les instructions, mais avec ma solution simplifiée:

Installez Bootstrap 4 ( instructions ):

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

Si nécessaire, renommez votre src / styles.css en styles.scss et mettez à jour .angular-cli.json pour refléter le changement:

"styles": [
  "styles.scss"
],

Ajoutez ensuite cette ligne à styles.scss :

@import '~bootstrap/scss/bootstrap';

vérifiez simplement votre fichier package.json et ajoutez des dépendances pour bootstrap

"dependencies": {

   "bootstrap": "^3.3.7",
}

puis ajoutez le code ci-dessous sur le .angular-cli.jsonfichier

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

Enfin, il vous suffit de mettre à jour votre npm localement en utilisant le terminal

$ npm update

1. npm install --save bootstrap

2. allez dans -> fichier angular-cli.json , trouvez les propriétés des styles et ajoutez simplement la piqûre suivante: "../node_modules/bootstrap/dist/css/bootstrap.min.css", cela pourrait ressembler à ceci:

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

Procédure avec Angular 6+ et Bootstrap 4+:

1. Ouvrez un shell sur le dossier de votre projet
2. Installez bootstrap avec la commande: npm install --save [email protected]
3. Bootstrap a besoin de la dépendance jquery, donc si vous ne l'avez pas, vous pouvez l'installer avec la commande: npm install --save jquery 1.9.1
4. Vous devrez peut-être corriger la vulnérabilité avec la commande: npm audit fix
5. Dans votre fichier style.scss principal, ajoutez la ligne suivante: @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

OU

Ajoutez cette ligne à votre fichier principal index.html: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Je cherchais la même réponse et j'ai finalement trouvé ce lien. Vous pouvez trouver trois façons différentes d'ajouter du bootstrap css à votre projet angular 2. Ça m'a aidé.

Voici le lien: http://codingthesmartway.com/using-bootstrap-with-angular/

Ma recommandation serait au lieu de le déclarer dans le stylet json pour le mettre dans le scss afin que tout soit compilé et en un seul endroit.

1) installer bootstrap avec npm

 npm install bootstrap

2) Déclarez bootstrap npm dans le css avec nos styles

Créer _bootstrap-custom.scss:

  // Required
  @import "bootstrap-custom-required";


  // Optional
  @import "~bootstrap/scss/root";
  @import "~bootstrap/scss/grid";
  @import "~bootstrap/scss/tables";

    ...
    ..
    .

3) Dans le styles.scss, nous insérons

@import "bootstrap-custom";

donc nous aurons tout notre noyau compilé et en un seul endroit

Vous pouvez essayer d'utiliser la bibliothèque d'interface utilisateur de Prettyfox http://ng.prettyfox.org

Cette bibliothèque utilise les styles bootstrap 4 et n'a pas besoin de jquery.

ajoutez les lignes suivantes dans votre page html

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Si vous utilisez angular cli, après avoir ajouté bootstrap dans package.json et installé le package, tout ce dont vous avez besoin est d'ajouter boostrap.min.css dans la section "styles" de .angular-cli.json.

Une chose importante est "Lorsque vous apportez des modifications à .angular-cli.json, vous devrez redémarrer ng serve pour récupérer les modifications de configuration."

Réf:

https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Une autre très bonne alternative est d'utiliser le squelette Angular 2/4 + Bootstrap 4

1) Téléchargez le ZIP et extrayez le dossier zip

2) ng servir