Comment append un bootstrap à un projet angular-cli

Nous voulons utiliser bootstrap 4 (4.0.0-alpha.2) dans notre application générée avec angular-cli 1.0.0-beta.5 (avec nœud v6.1.0).

Après avoir obtenu bootstrap et ses dépendances avec npm, notre première approche a consisté à les append dans angular-cli-build.js :

  'bootstrap/dist/**/*.min.+(js|css)', 'jquery/dist/jquery.min.+(js|map)', 'tether/dist/**/*.min.+(js|css)', 

et les importer dans notre index.html

      

Cela a bien fonctionné avec ng serve mais dès que nous avons produit une compilation avec -prod , toutes ces dépendances ont disparu de dist/vendor (surprise!).

Comment avons-nous l’intention de gérer un tel scénario (c.-à-d. Charger des scripts bootstrap) dans un projet généré avec des angles angulars?

Nous avons eu les pensées suivantes mais nous ne soaps pas vraiment où aller …

  • utiliser un CDN? mais nous préférons servir ces fichiers pour garantir qu’ils seront disponibles

  • copier les dépendances vers dist/vendor après notre ng build -prod ? Mais cela semble être quelque chose d’angular, car il prend soin de la partie de construction?

  • en ajoutant jquery, bootstrap et tether dans src / system-config.ts et en les intégrant dans notre bundle dans main.ts? Mais cela semblait erroné étant donné que nous n’allons pas les utiliser explicitement dans le code de notre application (contrairement à moment.js ou quelque chose comme lodash, par exemple)

MISE À JOUR IMPORTANTE: ng2-bootstrap est maintenant remplacé par ngx-bootstrap

ngx-bootstrap supporte à la fois les angulars 3 et 4.

Mise à jour: 1.0.0-beta.11-webpack ou versions supérieures

Vérifiez tout d’abord votre version angular-cli avec la commande suivante dans le terminal:

 ng -v 

Si votre version angular-cli est supérieure à 1.0.0-beta.11-webpack , vous devez suivre ces étapes:

  1. Installez ngx-bootstrap et bootstrap :

     npm install ngx-bootstrap bootstrap --save 

Cette ligne installe Bootstrap 3 de nos jours, mais peut installer Bootstrap 4 dans le futur. Gardez à l’esprit que ngx-bootstrap supporte les deux versions.

  1. Ouvrez src / app / app.module.ts et ajoutez:

     import { AlertModule } from 'ngx-bootstrap'; ... @NgModule({ ... imports: [AlertModule.forRoot(), ... ], ... }) 
  2. 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" ], 
  3. Ouvrez src / app / app.component.html et ajoutez:

     hello 

1.0.0-beta.10 ou versions inférieures:

Et si votre version angular-cli est 1.0.0-beta.10 ou inférieure, vous pouvez utiliser les étapes ci-dessous.

Tout d’abord, allez dans le répertoire du projet et tapez:

 npm install ngx-bootstrap --save 

Ensuite, ouvrez votre angular-cli-build.js et ajoutez cette ligne:

 vendorNpmFiles: [ ... 'ngx-bootstrap/**/*.js', ... ] 

Maintenant, ouvrez votre src / system-config.ts puis écrivez:

 const map:any = { ... 'ngx-bootstrap': 'vendor/ngx-bootstrap', ... } 

…et:

 const packages: any = { 'ngx-bootstrap': { format: 'cjs', defaultExtension: 'js', main: 'ngx-bootstrap.js' } }; 

Chercher le mot-clé> Global Library Installation sur https://github.com/angular/angular-cli vous aide à trouver la réponse.

Selon leur document, vous pouvez suivre les étapes suivantes pour append une bibliothèque Bootstrap.

Installez d’abord Bootstrap à partir de npm:

 npm install bootstrap@next 

Ajoutez ensuite les fichiers de script nécessaires aux applications [0] .scripts du fichier angular-cli.json:

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

Enfin, ajoutez le CSS Bootstrap au tableau des applications [0] .styles:

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

Redémarrez le service si vous l’exécutez, et Bootstrap 4 devrait fonctionner sur votre application.

C’est la meilleure solution. Mais si vous ne recommencez pas à servir, cela ne fonctionnera jamais. Il est fortement recommandé de faire cette dernière action.

Procédez comme suit:

 npm i bootstrap@next --save 

Cela appenda le bootstrap 4 à votre projet.

Ensuite, allez dans votre src/style.scss ou src/style.css (choisissez celui que vous utilisez) 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"; 

Pour les scripts, vous devrez toujours append le fichier dans le fichier angular-cli.json ( dans Angular version 6, cette édition doit être effectuée dans le fichier angular.json ) :

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

Au début, vous devez installer tether, jquery et bootstrap avec ces commandes

 npm i -S tether npm i -S jquery npm i -S bootstrap@4.0.0-alpha.4 

Après avoir ajouté ces lignes dans votre fichier angular-cli.json (angular.json à partir de la version 6)

  "styles": [ "styles.scss", "../node_modules/bootstrap/scss/bootstrap-flex.scss" ], "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/tether/dist/js/tether.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ] 

Mise à jour v1.0.0-beta.26

Vous pouvez voir sur le document la nouvelle façon d’importer le bootstrap ici

Si cela ne fonctionne toujours pas, redémarrez avec la commande ng serve

1.0.0 ou versions inférieures:

Dans votre fichier index.html, vous avez juste besoin du lien css bootstrap (pas besoin de scripts js)

  

Et

 npm install ng2-bootstrap --save npm install moment --save 

Après avoir installé ng2-bootstrap dans my_project / src / system-config.ts:

 /** Map relative paths to URLs. */ const map: any = { 'moment': 'vendor/moment/moment.js', 'ng2-bootstrap': 'vendor/ng2-bootstrap' }; /** User packages configuration. */ const packages: any = { 'ng2-bootstrap': { defaultExtension: 'js' }, 'moment':{ format: 'cjs' } }; 

Et dans my_project / angular-cli-build.js:

 module.exports = function (defaults) { return new Angular2App(defaults, { vendorNpmFiles: [ 'ng2-bootstrap/**/*', 'moment/moment.js' ] }); }; 

N’oubliez pas cette commande pour placer votre module dans le fournisseur:

 ng build 

importer depuis un autre module qui est le même principe.

Puisque personne ne s’est référé à l’histoire officielle (l’équipe angular-cli) sur la façon d’inclure Bootstrap encore: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Inclure Bootstrap

Bootstrap est un framework CSS populaire qui peut être utilisé dans un projet Angular. Ce guide vous guidera dans l’ajout de bootstrap à votre projet Angular CLI et sa configuration pour utiliser le bootstrap.

En utilisant CSS

Commencer

Créer un nouveau projet et naviguer dans le projet

 ng new my-app cd my-app 

Installer Bootstrap

Avec le nouveau projet créé et prêt, vous devrez ensuite installer bootstrap sur votre projet en tant que dépendance. En utilisant l’option --save , la dépendance sera enregistrée dans package.json

 # version 3.x npm install bootstrap --save # version 4.x npm install bootstrap@next --save 

Configuration du projet

Maintenant que le projet est configuré, il doit être configuré pour inclure le CSS bootstrap.

  • Ouvrez le fichier .angular-cli.json depuis la racine de votre projet.
  • Sous les apps propriété, le premier élément de ce tableau est l’application par défaut.
  • Il existe un styles propriété qui permet d’appliquer des styles globaux externes à votre application.
  • Spécifiez le chemin d’access à bootstrap.min.css

Cela devrait ressembler à ce qui suit lorsque vous avez terminé:

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

Remarque: Lorsque vous apportez des modifications à .angular-cli.json vous devez redémarrer ng serve pour prendre en compte les modifications de configuration.

Projet de test

Ouvrez app.component.html et ajoutez le balisage suivant:

  

Avec l’application configurée, exécutez ng serve pour exécuter votre application en mode développement. Dans votre navigateur, accédez à l’application localhost:4200 . Vérifiez que le bouton stylisé bootstrap apparaît.

Utiliser SASS

Commencer

Créer un nouveau projet et naviguer dans le projet

 ng new my-app --style=scss cd my-app 

Installer Bootstrap

 # version 3.x npm install bootstrap-sass --save # version 4.x npm install bootstrap@next --save 

Configuration du projet

Créez un fichier vide _variables.scss dans src/ .

Si vous utilisez bootstrap-sass , ajoutez ce qui suit à _variables.scss :

 $icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/'; 

Dans styles.scss ajoutez ce qui suit:

 // version 3 @import 'variables'; @import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap'; // version 4 @import 'variables'; @import '../node_modules/bootstrap/scss/bootstrap'; 

Projet de test

Ouvrez app.component.html et ajoutez le balisage suivant:

  

Avec l’application configurée, exécutez ng serve pour exécuter votre application en mode développement. Dans votre navigateur, accédez à l’application localhost:4200 . Vérifiez que le bouton stylisé bootstrap apparaît. Pour vous assurer que vos variables sont utilisées, ouvrez _variables.scss et ajoutez les éléments suivants:

 $brand-primary: red; 

Renvoyez le navigateur pour voir la couleur de la police modifiée.

Je suppose que les méthodes ci-dessus ont changé après la sortie, vérifiez ce lien

https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md

initier le projet

 npm i -g angular-cli ng new my-app cd my-app ng serve npm install --save @ng-bootstrap/ng-bootstrap 

installer ng-bootstrap et bootstrap

 npm install ng2-bootstrap bootstrap --save 

ouvrez src / app / app.module.ts et ajoutez

 import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap'; ... @NgModule({ ... imports: [AlertModule, ... ], ... }) 

ouvrir angular-cli.json et insérer 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 testez tous les travaux en ajoutant

 hello 

Etant donné que cela est devenu si déroutant et que les réponses ici sont totalement mitigées, je suggérerais simplement de rejoindre l’équipe officielle de l’interface utilisateur pour le repo BS4 (oui, il y a tellement de repos pour NG-Bootstrap).

Suivez simplement les instructions ici https://github.com/ng-bootstrap/ng-bootstrap pour obtenir BS4.

Citant de la lib:

Cette bibliothèque est construite de toutes pièces par l’équipe ui-bootstrap. Nous utilisons TypeScript et ciblons le framework CSS Bootstrap 4.

Comme avec Bootstrap 4, cette bibliothèque est un travail en cours. S’il vous plaît consulter notre liste de problèmes pour voir toutes les choses que nous mettons en œuvre. N’hésitez pas à y faire des commentaires.

Il suffit de copier coller ce qui est là pour le plaisir:

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

Une fois installé, vous devez importer notre module principal:

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

La seule partie restante consiste à répertorier le module importé dans votre module d’application. La méthode exacte sera légèrement différente pour le module racine (de niveau supérieur) pour lequel vous devriez vous retrouver avec le code similaire à (remarque NgbModule.forRoot ()):

 import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; @NgModule({ declarations: [AppComponent, ...], imports: [NgbModule.forRoot(), ...], bootstrap: [AppComponent] }) export class AppModule { } 

D’autres modules de votre application peuvent simplement importer NgbModule:

 import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; @NgModule({ declarations: [OtherComponent, ...], imports: [NgbModule, ...], }) export class OtherModule { } 

Cela semble être le comportement le plus cohérent de loin

Étapes pour Bootstrap 4 dans Angular 5

  1. Créer un projet angular 5

    ng nouveau AngularBootstrapTest

  2. Déplacer dans le répertoire du projet

    cd AngularBootstrapTest

  3. Télécharger le bootstrap

    npm installe le bootstrap

  4. Ajouter Bootstrap au projet

    4.1 ouvrir .angular-cli.json

    4.2 trouver la section “styles” dans json

    4.3 append le chemin css bootstrap comme ci-dessous

    .

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

Maintenant, vous avez ajouté avec succès le css bootstrap dans le projet angular 5

Test bootstrap

  1. Ouvrez src/app/app.component.html
  2. Ajouter un composant bouton bootstrap

.

  

vous pouvez vous référer aux styles de boutons ici ( https://getbootstrap.com/docs/4.0/components/buttons/ )

  1. enregistrer le fichier

  2. exécuter le projet

    ng serve –open

Maintenant, vous verrez le bouton de style bootstrap dans la page

Remarque: si vous avez ajouté un chemin bootstrap après ng serve , vous devez arrêter et réexécuter ng pour refléter les modifications.

Procédez comme suit:

  1. npm install --save bootstrap

  2. Et dans votre fichier .angular-cli.json, ajoutez à la section styles:

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

Après cela, vous devez redémarrer votre service ng

Prendre plaisir

  1. Installer le bootstrap

      npm install bootstrap@next 

2.Ajouter le code à .angular-cli.json:

  "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" ], 
  1. Dernier ajout bootstrap.css à votre code style.scss

     @import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; 
  2. Redémarrez votre serveur local

Vous pouvez également regarder cette vidéo de Mike Brocchi, qui contient des informations utiles sur la manière d’append un bootstrap à votre projet généré par Angular-Cli. https://www.youtube.com/watch?v=obbdFFbjLIU (environ minutes 13:00)

  1. Exécuter en bash npm install ng2-bootstrap bootstrap --save
  2. Ajouter / modifier ce qui suit dans angular-cli.json
    "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],

Maintenant, avec la nouvelle version de ng-bootstrap 1.0.0-beta.5 , la plupart des directives Angular natives basées sur le balisage et CSS de Bootstrap sont sockets en charge.

La seule dépendance requirejse pour travailler avec ceci est bootstrap . Pas besoin d’utiliser les dépendances jquery et popper.js .

ng-bootstrap consiste à remplacer complètement l’implémentation JavaScript pour les composants. Vous n’avez donc pas besoin d’inclure bootstrap.min.js dans la section scripts de votre fichier .angular-cli.json.

Suivez ces étapes lorsque vous intégrez le bootstrap au projet généré avec la dernière version angi-cli.

  • Inculde bootstrap.min.css dans votre section styles .angular-cli.json.

     "styles": [ "styles.scss", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], 
  • Installez la dépendance ng-bootstrap .

     npm install --save @ng-bootstrap/ng-bootstrap 
  • Ajoutez ceci à votre classe principale de module.

     import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; 
  • Incluez les éléments suivants dans la section d’import de votre module principal.

     @NgModule({ imports: [NgbModule.forRoot(), ...], }) 
  • Procédez comme suit également dans vos sous-modules si vous envisagez d’utiliser des composants ng-bootstrap dans ces classes de modules.

     import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; @NgModule({ imports: [NgbModule, ...], }) 
  • Votre projet est maintenant prêt à utiliser les composants ng-bootstrap disponibles.

Ouvrez l’invite de commande Terminal / dans le répertoire du projet respectif et tapez la commande suivante.

 npm install --save bootstrap 

Puis ouvrez le fichier .angular-cli.json, Recherchez

"styles": [ "styles.css" ],

changer cela à

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

Terminé.

angular-cli maintenant une page wiki dédiée où vous pouvez trouver tout ce dont vous avez besoin. TLDR, installez bootstrap via npm et ajoutez le lien des styles à la section “styles” de votre fichier .angular-cli.json

Exemple de travail en cas d’utilisation d’angular-cli et de css:

1. installer le bootstrap

npm installer bootstrap longe jquery –save

2.add à .angular-cli.json

  "styles": [ "../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" ], 

installer boostrap en utilisant npm

 npm install boostrap@next --save 

puis vérifiez votre dossier node_modules pour le fichier boostrap.css (dans dist) normalement le chemin est

 "../node_modules/bootstrap/dist/css/bootstrap.css", 

append ce chemin | import boostrap dans style.css ou style.scss

 @import "../node_modules/bootstrap/dist/css/bootstrap.css"; //bootstrap @import "~@angular/material/prebuilt-themes/indigo-pink.css // angular material theme 

c’est tout.

  1. Installez bootstrap, popper.js

npm install --save bootstrap npm install --save popper.js

  1. Dans src / styles.css , importez le style de bootstrap

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

Un exemple de travail en cas d’utilisation d’angular-cli:

 npm i bootstrap-schematics ng generate bootstrap-shell -c bootstrap-schematics -v 4 npm install 

Fonctionne pour css et scss. Bootstrap v3 et v4 sont disponibles.

Pour plus d’informations sur les schémas bootstrap, veuillez trouver ici .

  1. Installez Bootstrap en utilisant npm

     npm install bootstrap 

2. Installez Popper.js

 npm install --save popper.js 

3. Aller à angular.json dans Angular 6 project / .angular-cli.json dans Angular 5 et append les éléments suivants:

  "styles": [ "node_modules/bootstrap/dist/css/bootstrap.css", "src/styles.css" ], "scripts": [ "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ] 

Exécutez cette commande suivante dans le projet

 npm install --save @bootsrap@4 

et si vous obtenez une confirmation comme celle-ci

 + bootstrap@4.1.3 updated 1 package in 8.245s 

Cela signifie que boostrap 4 est installé avec succès. Cependant, pour l’utiliser, vous devez mettre à jour le tableau “styles” sous le fichier angular.json.

Mettez-le à jour de la manière suivante pour que le bootstrap puisse remplacer les styles existants

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

Pour vous assurer que tout est configuré correctement, lancez ng serve > open browser at http://localhost:4200/ or a port you run the angular app > right click > inspect > under the head check the styles if you have bootsrap like shown belowng serve > open browser at http://localhost:4200/ or a port you run the angular app > right click > inspect > under the head check the styles if you have bootsrap like shown below , alors vous êtes bien d’utiliser boostrap. entrer la description de l'image ici

Installez bootstrap en utilisant npm i --save bootstrap@version Maintenant, allez dans le dossier nodemodules et à partir du dossier bootstrap copiez le chemin de ‘bootstrap.min.css.js’ et collez le chemin complet (comme nodemodules/bootstrap/css/bootstrap.min.css.js ) dans angular.json sous le fichier de balise de script et relancez le serveur et pour vérifier si l’installation est réussie, exécutez le programme dans n’importe quel navigateur et appuyez sur F12; vous verrez qu’une partie de la fenêtre s’ouvre , maintenant aller à l’onglet des éléments ouvrir la balise de tête et si vous voyez bootstrap dans la balise de style, votre installation est réussie.