web-dev-qa-db-fra.com

Comment utiliser bootstrap 4 en angulaire 2?

Je construis une application angulaire 2 écrite en TypeScript. Il utiliserait le framework bootstrap 4 en combinaison avec des thèmes personnalisés, est-ce possible?

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

Dans mon projet angular 2, j'utilise sass, serait-il possible de créer bootstrap 4 à partir du code source, car il utilise également sass pour le style?

twitter-bootstraptypescriptangularnpmsass
43
aqwsez

Pour utiliser une bibliothèque visuelle nécessitant JQuery, procédez comme suit:

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

Si la bibliothèque ne possède pas de fichier de définition, vous pouvez:

  • Créez la définition vous-même;
  • Créez une variable globale avec le même nom que l'objet de bibliothèque, juste pour ne pas avoir d'erreurs de compilation.
  • Utiliser avec des erreurs ( c'est la pire option );

Maintenant, vous pouvez utiliser la bibliothèque à l'intérieur de TypeScript;

9
Reginaldo Camargo Ribeiro

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

Si vous utilisez le angular2 cli/angular 4 cli do suivant:

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-le ici:

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 Bootstrap JS

Pour que les composants Bootstrap JS fonctionnent, vous devez toujours importer bootstrap.js dans .angular-cli.json sous scripts(cela devrait se produire 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: Boostrap 4 Beta utilise maintenant popper.js au lieu de tether.js. Donc, selon la version que vous utilisez, importez tether.js (alpha) ou popper.js (beta) dans vos scripts. Merci pour le heads up @MinorThreat

92
mahatmanich

Les options ci-dessus fonctionnent, mais j’utilise cette approche via NPM: 

  1. Accédez à: Bootstrap 4 et récupérez la commande npm.

  2. Exécutez la commande NPM obtenue à l’étape 1 dans votre projet i.e 

    npm install [email protected] --save

  3. 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 Vous pouvez en savoir plus sur ceci ici

  4. Ajoutez l'importation suivante dans app.module import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; et ajoutez NgbModule à la imports

  5. 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 { }

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

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

  7. Ouvrez src/app/app.component.html et ajoutez

    <alert type="success">hello</alert>

    ou si vous souhaitez utiliser ng alert, placez le texte suivant sur votre app.component.html page

    <ngb-alert [dismissible]="true">I'm a dismissible alert :) </ngb-alert>

  8. Maintenant, lancez votre projet et vous devriez voir le message d'alerte d'amorçage dans le navigateur.

NOTE: Vous pouvez en savoir plus sur ici composants }

38
Code Ratchet

Je voudrais suggerer:

  • Inclure simplement un lien vers le fichier CSS de Bootstrap dans votre page index.html
  • En utilisant ng-bootstrap - un ensemble dédié de directives Angular 2 pour les parties où un comportement dynamique est nécessaire. De cette façon, vous n'avez pas besoin d'importer/configurer jQuery ni de vous soucier de JavaScript dans Bootstrap.
7
pkozlowski.opensource

Vous pouvez utiliser npm pour installer la dernière version de bootstrap. Cela peut être fait en utilisant la commande:

npm install [email protected]

Et après cela, vous devrez peut-être importer bootstrap.css dans votre fichier css principal. Qui sera styles.css, si vous utilisez angular-cli.

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

Si vous voulez en savoir plus, veuillez utiliser le lien: http://technobytz.com/install-bootstrap-4-using-npm.html

3
Aravind

Commencez par aller dans le répertoire de votre projet et suivez les étapes ci-dessous.

1) npm install --save @ng-bootstrap/ng-bootstrap (exécutez cette commande dans l'invite de commande du noeud js)

2) npm install [email protected] (à la prochaine exécution)

3) import {NgbModule} from '@ng-bootstrap/ng-bootstrap' (écrivez ceci dans app module.ts)

4) Si Module est votre module racine, incluez ceci

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

    (or)

Si ce n'est pas le module racine

`@NgModule({
 declarations: [OtherComponent, ...],
 imports: [NgbModule, ...]
})`

5) Ecrivez ceci dans system.config.js

`map: {
'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-
bootstrap/bundles/ng-bootstrap.js',
}`

6) Ajouter dans Index.html

`<script src="../node_modules/jquery/dist/jquery.min.js"></script>
 <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 <link rel="stylesheet" type="text/css" 
 href="../node_modules/bootstrap/dist/css/bootstrap.min.css" />`
1
Rajesh Chenumalla

Angular v6 à partir de Bootstrap v4 et SCSS

Cela fonctionne très bien avec un projet activé angular 7 scss

Exécutez les commandes suivantes pour installer bootstrap, jQuery et popper.js

npm install --save bootstrap jquery popper.js

jQuery et popper.js sont des conditions préalables à l'exécution de bootstrap4 (voir https://getbootstrap.com pour plus d'informations.)

Accédez à votre fichier angular.json dans le dossier racine. modifier 

architecte -> build -> options -> scripts

noeud comme suit

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

Cela activera les fonctions javascript de bootstrap sur votre projet.

Ensuite, allez dans le fichier src->styles.scss et ajoutez la ligne suivante

@import '~bootstrap/scss/bootstrap';
0
Janith Widarshana

ng add a été introduit avec Angular 6. Pour installer Bootstrap 4 (ng-bootstrap 2.0.0)

ng add @ng-bootstrap/schematics

N'oubliez pas de redémarrer votre application avec ng serve.

0
kostjakon

Dans angular 6: Première installation du bootstrap dans le répertoire du projet npm install bootstrap. Si vous regardez le fichier Angular.JSON, vous verrez que styles.css est déjà référencé. Dans styles.css, ajoutez simplement @import "~bootstrap/dist/css/bootstrap.css";.

0
skydev

Ajout de Bootstrap à l’aide de la CLI angulaire:

step 1. npm i bootstrap@latest --save 
step 2. open angular.json and then add bootstrap:
 "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.scss"
    ]
step 3. restart the server to see the changes
        ng serve
0
sunny rai

Dans angular 6, n’utilisez pas npm i bootstrap @ next --save, cela peut marcher, mais parfois il n’est pas préférable d’ajouter:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>
0
nikhil sugandh