Comment ajouter bootstrap à un projet angular-cli

Question

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 (w/node v6.1.0).

Après avoir obtenu bootstrap et ses dépendances avec npm, notre première approche a consisté à les ajouter 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

 <script src="vendor/jquery/dist/jquery.min.js"></script> <script src="vendor/tether/dist/js/tether.min.js"></script> <link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css"> <script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

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

Comment nous sommes censés gérer un tel scénario (c'est-à-dire le chargement de scripts d'amorçage) dans un projet généré avec angular-cli?

Nous avons eu les pensées suivantes mais nous ne savons pas vraiment quel chemin aller ...

utiliser un CDN? mais nous préférerions 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 que angular-cli devrait fournir puisqu'il "prend en charge" la partie de construction?
ajouter jquery, bootstrap et tether dans src/system-config.ts et les tirer en quelque sorte 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).

pd farhad · Accepted Answer

IMPORTANT UPDATE: _ {ng2-bootstrap est maintenant remplacé par ngx-bootstrap

ngx-bootstrap prend en charge les angulaires 3 et 4.

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

Tout d’abord, vérifiez votre version de angular-cli à l’aide de la commande suivante dans le terminal:

ng -v

Si votre version de angular-cli est supérieure à 1.0.0-beta.11-webpack}, procédez comme suit:

Installez ngx-bootstrap et bootstrap:

npm install ngx-bootstrap bootstrap --save

Cette ligne installe Bootstrap 3 de nos jours, mais peut installer Bootstrap 4 à l’avenir. Gardez à l'esprit que ngx-bootstrap prend en charge les deux versions.

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

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

Ouvrez angular-cli.json et insérez une nouvelle entrée dans le tableau 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> 
```

1.0.0-beta.10 ou versions antérieures:

Et si votre version de 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' } };

Nelly Sattari · Answer

Rechercher la clé dans Word> Installation de la bibliothèque globale Sur https://github.com/angular/angular-cli vous aide à trouver la réponse.

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

Commencez par installer 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 apps [0] .styles:

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

Redémarrez si vous l'exécutez et Bootstrap 4 devrait fonctionner sur votre application.

C'est la meilleure solution . Mais si vous ne redémarrez pas ng serve, cela ne fonctionnera jamais. Il est fortement recommandé de faire cette dernière action.

mahatmanich · Answer

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 (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 ajouter le fichier dans le fichier angular-cli.json comme suit (Dans Angular version 6, cette modification 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" ],

Alberto Viezzi · Answer

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" ]

tilo · Answer

Puisque personne n'a fait référence à l'histoire officielle (angular-cli team) expliquant comment inclure Bootstrap: 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 expliquera comment ajouter Bootstrap à votre projet CLI Angular et le configurer pour utiliser bootstrap.

Utiliser CSS

Commencer

Créer un nouveau projet et naviguer dans le projet

ng new my-app cd my-app

Installation de Bootstrap

Avec le nouveau projet créé et prêt, vous devrez ensuite installer bootstrap en tant que dépendance dans votre projet . 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 d'amorçage.

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

Cela devrait ressembler à ceci quand vous avez fini:

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

Remarque: Lorsque vous apportez des modifications à .angular-cli.json, vous devrez redémarrer ng serve pour récupérer les modifications de configuration.

Projet d'essai

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

<button class="btn btn-primary">Test Button</button>

Lorsque l'application est 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 de style d'amorçage apparaît.

Utiliser SASS

Commencer

Créer un nouveau projet et naviguer dans le projet

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

Installation de 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 d'essai

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

<button class="btn btn-primary">Test Button</button>

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 de style de bootstrap apparaît . Pour vous assurer que vos variables sont utilisées, ouvrez _variables.scss et ajoutez le suivant:

$brand-primary: red;

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

Shigiang Liu · Answer

Update v1.0.0-beta.26

Vous pouvez voir sur le doc la nouvelle façon d'importer bootstrap ici

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

1.0.0 ou versions antérieures:

Dans votre fichier index.html, vous avez simplement besoin d’un lien bootstrap css (pas besoin de scripts js)

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

Et

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

Après avoir installé ng2-bootstrap in 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 l'éditeur:

ng build

importer depuis un autre module, c'est le même principe.

shakram02 · Answer

Je suppose que les méthodes ci-dessus ont changé après la publication, consultez ce lien

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

initier projet

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

install 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, ... ], ... })

open 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" ],

open src/app/app.component.html et testez tous les travaux en ajoutant

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

rashidnk · Answer

Steps pour Bootstrap 4 en angulaire 5

Créer un projet angulaire 5

ng new AngularBootstrapTest
Déplacer vers le répertoire du projet

cd AngularBootstrapTest
Télécharger le bootstrap

npm install bootstrap
Ajouter Bootstrap au projet

4.1 open .angular-cli.json

4.2 trouver la section "styles" dans le json

4.3 ajouter 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 fichier bootstrap css in angular 5

Test bootstrap

ouvrir src/app/app.component.html
ajouter un composant de bouton d'amorçage

.

<button type="button" class="btn btn-primary">Primary</button>

vous pouvez consulter les styles de bouton ici ( https://getbootstrap.com/docs/4.0/components/buttons/ )

sauvegarder le fichier
lancer le projet

ng serve --open

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

Remarque : si vous avez ajouté le chemin d'amorçage après ng serve, vous devez arrêter et réexécuter le service ng pour refléter les modifications.

Jimmy Kane · Answer

Depuis que cela est devenu tellement déroutant et que les réponses ici sont totalement mitigées, je suggèrerai simplement d'aller avec la official ui-team pour BS4 repo (oui, il y en a beaucoup 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 à partir de zéro par l'équipe ui-bootstrap. Nous utilisez TypeScript et cible le framework CSS Bootstrap 4.

Comme avec Bootstrap 4, cette bibliothèque est un travail en cours. Vérifiez s'il vous plaît notre liste de questions pour voir tout ce que nous mettons en œuvre. Ressentir libre de faire des commentaires là-bas.

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 (niveau supérieur) pour lequel vous devriez vous retrouver avec un code similaire à (notez NgbModule.forRoot ()):

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

Les 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 constant de loin

L&#233;ger Djiba · Answer

Effectuez les étapes suivantes:

npm install --save bootstrap
Et dans votre .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 serveur

Prendre plaisir

Xjw919 · Answer

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" ],

Dernière ajouter bootstrap.css à votre code style.scss

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

Redémarrez votre serveur local

neoerol · Answer

Essaye ça

npm install bootstrap@next

https://github.com/angular/angular-cli#global-library-installation

srijishks · Answer

Exécuter en bash npm install ng2-bootstrap bootstrap --save
Ajouter/modifier les éléments suivants 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" ],

FEUJIO Marie Therese · Answer

Installez bootstrap, popper.js

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

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

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

Nelly Sattari · Answer

Vous pouvez également regarder cette vidéo de Mike Brocchi qui contient des informations utiles sur l’ajout d’amorçage à votre projet généré par Angular-Cli. https://www.youtube.com/watch?v=obbdFFbjLIU (environ 13 heures)

JLS · Answer

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

La seule dépendance requise pour travailler avec ceci est bootstrap. Pas besoin d'utiliser jquery et popper.js dependencies.

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

suivez ces étapes lorsque vous intégrez bootstrap avec le projet généré avec la dernière version d’angular-cli.

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

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

Installez ng-bootstrap dependency.

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

Ajoutez ceci à votre classe de module principale.

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

Incluez les éléments suivants dans la section Importations de votre module principal.
```
@NgModule({ imports: [NgbModule.forRoot(), ...], }) 
```
Effectuez les opérations suivantes é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.

ilia · Answer

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

1.installez bootstrap

npm installez le tether de bootstrap jquery --save

2.ajouter à .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" ],

Claudiu Constantin · Answer

angular-cli a 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 de styles à la section "styles" de votre fichier .angular-cli.json

Raj Sahoo · Answer

Ouvrez Terminal/command Invite dans le répertoire du projet correspondant et tapez la commande suivante.

npm install --save bootstrap

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

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

changer cela en

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

Terminé.

kireeti9 · Answer

Étape 1:
npm install bootstrap@latest --save-dev Ceci installera la dernière version du bootstrap, Cependant, la version spécifiée peut être installée en ajoutant le numéro de version

Étape 2: Ouvrez styles.css et ajoutez ce qui suit @import "~bootstrap/dist/css/bootstrap.css"

S.D.N Chanaka Fernando · Answer

installer boostrap en utilisant npm

npm install boostrap@next --save

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

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

ajouter ce chemin | importer 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.

Alexander Zaldostanov · Answer

Pour ajouter Bootstrap et Jquery les deux

npm install bootstrap@3 jquery --save

après avoir exécuté cette commande, veuillez aller de l'avant et vérifier votre dossier node_modules. Vous devriez pouvoir voir bootstrap et jquery ajouté à celui-ci.

tadtab · Answer

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 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, exécutez 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 below, puis utilisez plutôt boostrap .

Srinivas · Answer

Peu importe le framework JS que vous utilisez, l'importation de bootstrap dans votre projet est simple en suivant les 2 étapes ci-dessous:

Installez bootstrap en utilisant npm i -S bootstrap ou yarn add bootstrap.

Dans styles.css ou styles.scss, importez bootstrap en tant que @import '~bootstrap/dist/css/bootstrap.min.css'.

Andris · Answer

Je n'ai pas vu celui-ci ici:

@import 'bootstrap/scss/bootstrap.scss';

Je viens d'ajouter cette ligne dans style.scss. Dans mon cas, je souhaitais également remplacer les variables bootstrap.

Konvivial · Answer

Installer Bootstrap en utilisant npm
```
npm install bootstrap 
```

2.Installer Popper.js

npm install --save popper.js

3.Goto angular.json dans Angular 6 project/ .angular-cli.json dans Angular 5 et ajoutez ce qui suit:

 "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" ]

tejeswar · Answer

Ajoutez simplement ces trois lignes dans la balise Head dans index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Slupek · Answer

Un exemple de travail en cas d’utilisation de 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.

Plus d'informations sur les schémas bootstrap, veuillez trouver ici .

Alekya · Answer

Installez bootstrap en utilisant npm i --save bootstrap@version. Maintenant, allez dans le dossier nodemodules et copiez le dossier "bootstrap.min.css.js" dans le dossier bootstrap, puis collez le chemin complet (comme nodemodules/bootstrap/css/bootstrap.min.css.js) dans angular.json dans le fichier de balise de script, puis réexécutez le serveur et pour vérifier si l'installation est réussie, lancez le programme dans le navigateur de votre choix et appuyez sur la touche F12 pour trouver une partie de la fenêtre qui s'ouvre, allez maintenant à la balise de la tête des éléments à l'onglet des éléments ouverts et si vous voyez une balise de style bootstrap, alors votre installation est réussi.