Comment utiliser Bootstrap dans un projet Angular?

Je commence ma première application angular et ma configuration de base est terminée.

Comment puis-je append Bootstrap à mon application?

Si vous pouvez fournir un exemple, ce serait une grande aide.

Pourvu que vous utilisiez l’ 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 pour installer le bootstrap:
    $ npm install --save bootstrap . L’option --save fera apparaître bootstrap dans les dépendances.
  2. Editez le fichier .angular-cli.json, qui configure votre projet. C’est dans le répertoire du projet. Ajoutez une référence au tableau "styles" . La référence doit être le chemin relatif du fichier bootstrap 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": {} } } 

Maintenant, bootstrap devrait faire partie de vos parameters 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:

   

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: `ng2-bootstrap hello world!` }) export class AppComponent { } 

Tout ce que vous devez faire est d’inclure le css boostrap dans votre fichier index.html.

  

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 requirejs avec le ng-bootstrap de l’équipe angular-ui mentionné dans ce fil de discussion, vous voudrez l’utiliser à la place (NOTE: vous n’avez pas besoin d’inclure le fichier JS):

   

Vous pouvez également y faire référence localement après avoir exécuté npm install bootstrap@4.0.0-alpha.6 --save en pointant sur le fichier dans votre fichier styles.scss , 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 dissortingbuée en tant que paquet npm, comme ng2-bootstrap project https://github.com/valor-software/ng2-bootstrap ou Angular UI Bootstrap library.

J’utilise personnellement ng2-bootstrap. Il existe plusieurs façons de le configurer, car la configuration dépend de la manière dont votre projet Angular est généré. 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/comstackr": "~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 bonnes URL 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/comstackr': 'npm:@angular/comstackr/bundles/comstackr.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 de notre disque dur (car nous avons ajouté une dépendance bootstrap 3.3.7) ou à partir du Web. Là nous l’obtenons du web:

    ...  ...   Loading...   

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 depuis le répertoire / app

 import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `  Well done!  ` }) export class AppComponent { constructor() { } } 

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

 npm install 

Enfin, nous pouvons commencer notre application

 npm start 

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

Dans un environnement angular, la manière la plus simple de trouver est la suivante:

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

Note 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 souhaitées.

2. Solution dans un environnement avec les feuilles de style de 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’une des manières les plus complètes d’en tirer le maximum est d’utiliser ng-bootstrap, en utilisant cette configuration que nous donnons à algular2 pour contrôler complètement notre DOM, évitant d’avoir à utiliser JQuery et Boostrap .js

1-Prendre comme sharepoint 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 

Note: Plus d’infos sur https://ng-bootstrap.github.io/#/getting-started

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

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

Note: Plus d’infos 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 fichier .angular-cli.json en ajoutant le 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" } } ] 

L’étape suivante consiste à append le module ng-boostrap à notre projet. Pour ce faire, nous devons append le fichier app.module.ts:

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

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

Exemple:

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

Maintenant, nous pouvons commencer à utiliser bootstrap4 sur notre projet angular2 / 5.

J’ai eu la même question et 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" ], 

Puis ajoutez cette ligne à styles.scss :

 @import '~bootstrap/scss/bootstrap'; 

il suffit de vérifier votre fichier package.json et d’append des dépendances pour le bootstrap

 "dependencies": { "bootstrap": "^3.3.7", } 

puis ajoutez le code ci-dessous sur le fichier .angular-cli.json

  "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 le fichier -> angular-cli.json , trouvez les propriétés des styles et ajoutez le prochain sting: “../node_modules/bootstrap/dist/css/bootstrap.min.css”, il se peut que ceci ressemble à ceci:

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

Je cherchais la même réponse et finalement j’ai trouvé ce lien. Vous pouvez trouver trois manières différentes d’append le css bootstrap dans votre projet angular 2. Ça m’a aidé.

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

Vous pouvez essayer d’utiliser la bibliothèque Prettyfox UI http://ng.prettyfox.org

Cette bibliothèque utilise des styles bootstrap 4 et ne nécessite pas de jquery.

ajoutez les lignes suivantes dans votre page HTML

   

Si vous utilisez un angi cli, après avoir ajouté bootstrap dans package.json et installé le paquet, il vous suffit d’append boostrap.min.css dans la section “styles” de .angular-cli.json.

Une chose importante est “Lorsque vous apportez des modifications à .angular-cli.json, vous devez redémarrer ng servir pour prendre en compte les modifications de configuration.”

Ref:

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

Une autre très bonne alternative consiste à utiliser le squelette Angular 2/4 + Bootstrap 4

1) Télécharger ZIP et extraire le dossier zip

2) servir