typescript - Comment utiliser Bootstrap 4 dans Angular 2 ?

Je construis une application Angular 2 écrite en TypeScript. Elle utiliserait le framework Bootstrap 4 en combinaison avec certains thèmes personnalisés, est-ce possible ?

Le paquet npm "ng2-bootstrap" ne fonctionne pas car il ne me permet pas d'utiliser les classes css de Bootstrap, il fournit plutôt des composants personnalisés. (http://github.com/valor-software/ng2-bootstrap)

Dans mon projet Angular 2, j'utilise Sass, serait-il possible de construire Bootstrap 4 à partir des sources puisque lui aussi utilise Sass pour le style ?

Réponse #1

Bootstrap4 alpha pour Angular2 CLI (fonctionne également pour Angular4 CLI)

Si vous utilisez le CLI Angular2/CLI Angular 4, faites ce qui suit :

npm i bootstrap@next --save

Cela ajoutera Bootstrap 4 à votre projet.

Ensuite, allez dans votre fichier src/style.scss ou src/style.css et importez Bootstrap là :

Pour style.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Pour style.scss

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

Si vous utilisez scss, assurez-vous de changer votre style par défaut en scss dans .angular-cli.json :

  "defaults": {
    "styleExt": "scss",
    "component": {}
  }

Composants JS de Bootstrap

Pour que les composants JS de Bootstrap fonctionnent, vous devrez quand même importer bootstrap.js dans .angular-cli.json sous scripts (cela devrait se faire automatiquement) :

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

Mise à jour 2017/09/13 : Bootstrap 4 Beta utilise maintenant popper.js au lieu de tether.js. Donc, selon la version que vous utilisez, importez soit tether.js (alpha) soit popper.js (beta) dans vos scripts. Merci pour l'alerte @MinorThreat

Réponse #2

Les options ci-dessus fonctionneront, cependant j'utilise cette approche via NPM :

Naviguez vers : Bootstrap 4 et récupérez la commande npm
Exécutez la commande NPM obtenue à l'étape 1 dans votre projet, c'est-à-dire
```
npm install [email  --save
```
Après avoir installé la dépendance ci-dessus, exécutez la commande npm suivante qui installera le module bootstrap npm install --save @ng-bootstrap/ng-bootstrap Vous pouvez en lire plus à ce sujet ici
Ajoutez l'importation suivante dans app.module import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; et ajoutez NgbModule aux imports

Votre module d'application ressemblera à ceci :

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

@NgModule({
   declarations: [
   AppComponent,
   WeatherComponent
],
  imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  NgbModule.forRoot(), // Add Bootstrap module here.
],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Ouvrez angular-cli.json et insérez une nouvelle entrée dans le tableau des styles :

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

Ouvrez src/app/app.component.html et ajoutez
```
<alert type="success">hello</alert>
```
ou si vous souhaitez utiliser ng alert, placez alors ce qui suit sur votre page app.component.html
```
<ngb-alert [dismissible]="true">I'm a dismissible alert :) </ngb-alert>
```
Exécutez maintenant votre projet et vous devriez voir le message d'alerte Bootstrap dans le navigateur.

REMARQUE : Vous pouvez en savoir plus sur les composants ng ici

Réponse #3

Pour utiliser n'importe quelle bibliothèque visuelle qui nécessite JQuery, faites simplement ce qui suit :

Ajoutez la bibliothèque CSS dans l'index ;
Ajoutez le fichier js jquery à l'index ;
Ajoutez les fichiers js de la bibliothèque dans l'index ;
Installez les fichiers de définition de bibliothèque (d.ts) ;
Installer les fichiers de définitions jquery (d.ts);

Si la bibliothèque n’a pas de fichiers de définition, vous pourriez :

Créez la définition vous-même;
Créez une variable globale de type any avec le même nom que l'objet de la bibliothèque, juste pour ne pas obtenir d'erreurs du compilateur ;
À utiliser avec des erreurs (c'est la pire option);

Vous pouvez maintenant utiliser la bibliothèque dans Typescript ;