Comment ajouter un bootstrap à un projet angular-cli

234

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 servemais dès que nous avons produit une build avec -prodindicateur, toutes ces dépendances ont disparu dist/vendor(surprise!).

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

Nous avons eu les pensées suivantes mais nous ne savons 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 dist/vendoraprès notre ng build -prod? Mais cela semble que quelque chose d'angular-cli devrait fournir car il «s'occupe» de la partie de construction?

  • en ajoutant jquery, bootstrap et tether dans src/system-config.tset en quelque sorte les tirer dans notre bundle main.ts? Mais cela semblait faux é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).

Jérôme
la source
Les avez-vous dans votre fichier system-config.ts? vous devez les cartographier.
mjwrazor
1
La plupart des réponses ci-dessous recommandent l'utilisation de ngx-bootstrap. J'ai trouvé que ce n'est pas un remplacement complet des plugins jquery de Bootstrap et parfois vous devez toujours utiliser ces plugins jquery "natifs", tels que la fonctionnalité de réduction dans les tableaux. Dans ce cas, recherchez l'une des réponses ci-dessous qui explique comment importer explicitement le script jquery à partir du fichier .angular-cli.json.
Christoph
Utilisez simplement ng-bootstrap ng-bootstrap.github.io/#/home
Liam

Réponses:

299

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

ngx-bootstrap prend en charge Angular 3 et 4.

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

Vérifiez 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 à l'avenir. Gardez à l'esprit que ngx-bootstrap prend en charge 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 (pour angular6 et les noms de fichiers ultérieurs changés en angular.json ) et insérez une nouvelle entrée dans le stylestableau:

    "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
  3. Ouvrez src / app / app.component.html et ajoutez:

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

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'
  }
};
pd farhad
la source
6
Qu'est-ce que ng2-bootstrap exactement. que signifie l'ajout de bootstrap natif à angular 2? Désolé, je suis confus et j'ai cherché, mais je suis toujours confus. pourquoi ne puis-je pas suivre ces mêmes étapes pour télécharger le bootstrap au lieu d'utiliser un ng2-bootstrap tiers.
mjwrazor
1
@mjwrazor c'est parce que le bootstrap ne concerne pas seulement les styles. c'est un cadre frontal. pour être clair, vérifiez en utilisant le composant de notation avec ng2-bootstrap et pensez aux codes que vous écririez pour l'implémenter.
Ali Ghanavatian
5
Juste un petit avis pour les futurs lecteurs: la CLI angulaire est passée de SystemJS à WebPack avec beta.14. Cette réponse est désormais obsolète, car elle fournit une solution basée sur SystemJS.
jbandi
2
Merci pour l'idée d'utiliser ng2-bootstrap, j'ai trouvé ici un manuel d'installation pour angular cli, sur la page github. github.com/valor-software/ng2-bootstrap/blob/development/docs/… Dans mon cas, il manquait l'appel AlertModule.forRoot () lors des importations.
bruno.bologna
1
J'ai eu le même problème avec [email protected]& [email protected]. Suivre ces étapes avec la différence de app.module.tsne pas faire référence à ngx-bootstrap par 'ngx-bootstrap / ngx-bootstrap' mais par 'ngx-bootstrap' comme sur cet exemple sur github résoudre mon problème.
Edmond
123

Rechercher le mot clé> 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.

Installez d'abord Bootstrap à partir de npm:

npm install bootstrap@next

Ensuite, ajoutez les fichiers de script nécessaires à apps [0] .scripts dans le 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 le service 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 le service, cela ne fonctionne jamais. Il est fortement recommandé d'effectuer cette dernière action.

Nelly Sattari
la source
2
Comme je tape, c'est la seule solution qui semble utiliser la dernière version d'angular-cli.
freethebees
1
Le bootstrap.js n'est sûrement PAS nécessaire! Comme vous ne voulez pas utiliser juqery bootstrap.js pour cela, vous devez installer les directives ng2 de bootstrap.
Pascal
2
Si vous vouliez utiliser le javascript bootstrap par opposition au seul .css, vous devrez également inclure ses dépendances dans le tableau de scripts: "../node_modules/jquery/dist/jquery.slim.js", "../ node_modules / tether / dist / js / tether.js "," ../node/modules/bootstrap/dist/js/bootstrap.js "
Howard Swope
2
Vous feriez mieux d'utiliser bootstrap.bundle.js dans votre déclaration de scripts qui contient également popper.js.
Dejazmach
1
Pour faire le travail, ne manquez pas le dernier point, exécutez à ng servenouveau. Aussi pourquoi la CLI angulaire ne peut-elle pas l'ajouter automatiquement? Ce serait bien si nous avions une option pour cela.
shaijut
58

Procédez comme suit:

npm i bootstrap@next --save

Cela ajoutera bootstrap 4 à votre projet.

Ensuite, allez dans votre fichier src/style.scssou src/style.css(choisissez celui que vous utilisez) et importez-y bootstrap:

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 ceci ( 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"
],
mahatmanich
la source
5
À mon humble avis, c'est également une excellente option, en particulier avec les dernières versions de angular-cli. Le grand avantage est que cette méthode ne dépend pas des personnes qui mettent à jour la bibliothèque à partir du package npm mentionné dans la réponse acceptée; en outre, cela nous permet également de remplacer éventuellement les variables d'amorçage à l'aide de SASS sans pointer directement vers les fichiers CSS compilés.
Martin
2
Oui, il est plus propre et plus modulaire, donc je le préfère!
mahatmanich
Cela ne fonctionne pas pour moi, toutes les conditions préalables à suivre, j'utilise la dernière version d'angular et de bootstrap et j'ai ajouté toutes les modifications ci-dessus, n'a pas fonctionné de cette façon mais a travaillé sur l'ajout de <link rel = "stylesheet" type = "text / css" href = "vendor / bootstrap / dist / css / bootstrap.min.css"> dans index.html
har_shit
Ceci utilise la configuration cli!
mahatmanich
7
une méthode plus propre serait @import '~ bootstrap / dist / css / bootstrap'; Utiliser le signe ~ pour importer comme un module directement depuis le dossier node_modules. Trouvé une explication ici: stackoverflow.com/questions/39535760/…
AI
32

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"
  ]
Alberto Viezzi
la source
2
avez-vous dire $ projectRoot / .angular-cli.json?
21

Étant donné que personne n'a fait référence à l'histoire officielle (équipe angular-cli) sur la façon d'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 guidera à travers l'ajout de bootstrap à votre projet CLI angulaire et sa configuration pour utiliser le bootstrap.

Utilisation de CSS

Commencer

Créez un nouveau projet et accédez au projet

ng new my-app
cd my-app

Installer Bootstrap

Une fois le nouveau projet créé et prêt, vous devrez ensuite installer le bootstrap sur votre projet en tant que dépendance. En utilisant l' --saveoption, 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.jsonpartir de la racine de votre projet.
  • Sous la propriété, appsle premier élément de ce tableau est l'application par défaut.
  • Il existe une propriété stylesqui permet d'appliquer des styles globaux externes à votre application.
  • Spécifiez le chemin vers bootstrap.min.css

Il 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.jsonvous devrez redémarrer ng servepour récupérer les modifications de configuration.

Projet de test

Ouvrez app.component.htmlet ajoutez le balisage suivant:

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

Une fois l'application configurée, exécutez ng servepour exécuter votre application en mode développement. Dans votre navigateur, accédez à l'applicationlocalhost:4200 . Vérifiez que le bouton de style bootstrap apparaît.

Utilisation de SASS

Commencer

Créez un nouveau projet et accédez au 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.scssdans src/.

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

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

En styles.scssajouter 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.htmlet ajoutez le balisage suivant:

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

Une fois l'application configurée, exécutez ng servepour exécuter votre application en mode développement. Dans votre navigateur, accédez à l'application localhost:4200. Vérifiez que le bouton de style bootstrap apparaît. Pour vous assurer que vos variables sont utilisées, ouvrez _variables.scsset ajoutez ce qui suit:

$brand-primary: red;

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

tilo
la source
4
Cette solution n'ajoute pas les fichiers javascript pour le bootstrap, seulement le css
Robin van der Knaap
Voir cette autre histoire: github.com/angular/angular-cli/wiki/stories-global-lib . Il décrit l'ajout de fichiers de script, en prenant bootstrap 4 comme exemple.
Robin van der Knaap
$brand-primary: red;N'a pas travaillé pour moi. Mais $primary: red;oui!
Johan Frick
Merci d'avoir expliqué la différence entre bootstrap et boostrap @ next :-)
Venkatesh Muniyandi
17

Mise à jour v1.0.0-beta.26

Vous pouvez voir sur le doc pour 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 d'un lien css bootstrap (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 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 mon_projet / angular-cli-build.js:

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

N'oubliez pas cette commande pour mettre votre module chez le vendeur:

ng build

d'importer à partir d'un autre module qui est le même principe.

Shigiang Liu
la source
1
comment cela permet-il à bootstrap d'utiliser jquery? Je l'ai fait et cela ne fonctionne pas.
mjwrazor
l'exemple a finalement trouvé cela et cela a fonctionné. Je n'ai pas pu comprendre cela pendant un moment.
mjwrazor
8

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

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

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

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 testez tous les travaux en ajoutant

<alert type="success">hello</alert>
shakram02
la source
1
La méthode d'Ahmed Hamdy fonctionne, la mise à jour du code a apparemment eu lieu maintenant. Mise à jour de son message avec solution.
PeterH
1
si vous souhaitez utiliser Bootstrap 4, vous devez modifier "npm install ng2-bootstrap bootstrap --save" TO BE "npm install ng2-bootstrap [email protected] --save" .... pas entièrement évident dans la documentation (faites une recherche de 'card-' dans bootstrap.css pour savoir si cela a fonctionné) ... notez que c'est actuellement Alpha 6 cela va changer sans aucun doute ... consultez le site bootstrap pour les instructions npm actuelles
72GM
8

Étapes pour Bootstrap 4 dans Angular 5

  1. Créer un projet Angular 5

    du nouveau AngularBootstrapTest

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

    cd AngularBootstrapTest

  3. Télécharger bootstrap

    npm install bootstrap

  4. Ajouter Bootstrap au projet

    4.1 ouvert .angular-cli.json

    4.2 trouver la section "styles" dans le json

    4.3 ajouter le chemin css de bootstrap comme ci-dessous

    .

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

Vous avez maintenant ajouté avec succès le bootstrap css dans le projet angular 5

Test bootstrap

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

.

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

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

  1. enregistrez 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 d'amorçage après le service ng , vous devez arrêter et réexécuter le service ng pour refléter les changements

rashidnk
la source
6

Étant donné que cela est devenu si déroutant et que les réponses ici sont totalement mitigées, je proposerai simplement d'aller avec l' équipe ui officielle pour le repo BS4 (oui, il y a tellement de ces repos pour NG-Bootstrap.

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

Citant la lib:

Cette bibliothèque est construite à partir de zéro 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. Veuillez 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 à (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 de loin le comportement le plus cohérent

Jimmy Kane
la source
6
  1. Installer bootstrap

    npm install bootstrap@next
  2. Ajoutez 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"
    ],
  3. Enfin, ajoutez bootstrap.css à votre code style.scss

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

Xjw919
la source
Bien que ngx-bootstrap soit agréable pour les composants qu'il prend en charge, vous devez parfois encore utiliser des plugins jquery "natifs", tels que la fonctionnalité de réduction dans les tableaux. Ensuite, vous devez toujours importer explicitement le script jquery, comme le montre cette réponse.
Christoph
A voté pour le point 4 (redémarrez votre serveur local) J'utilise ---> npm install ngx-bootstrap bootstrap --save
Palanikumar
5

Procédez comme suit:

  1. npm install --save bootstrap

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

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

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

Prendre plaisir

Léger Djiba
la source
4
  1. Installer Bootstrap à l'aide de npm

    npm install bootstrap

2. installez Popper.js

npm install --save popper.js

3.Allez angular.json dans le projet Angular 6 / .angular-cli.json dans Angular 5 et ajoutez la liste:

 "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"
        ]
Konvivial
la source
2

Vous pouvez également regarder cette vidéo de Mike Brocchi qui contient des informations utiles sur la façon d'ajouter du bootstrap à votre projet généré par Angular-Cli. https://www.youtube.com/watch?v=obbdFFbjLIU (environ 13h00 minutes)

Nelly Sattari
la source
2
  1. Run in bash npm install ng2-bootstrap bootstrap --save
  2. Ajoutez / modifiez 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" ],
srijishks
la source
2

Ouvrez Terminal / invite de commande dans le répertoire de projet respectif 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é.

Raj Sahoo
la source
2

Désormais, avec la nouvelle version ng-bootstrap 1.0.0-beta.5 , la plupart des directives natives angulaires sont basées sur le balisage et CSS de Bootstrap.

La seule dépendance requise pour travailler avec cela 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.jsdans la section scripts de votre .angular-cli.json.

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

  • Inculde bootstrap.min.cssdans votre .angular-cli.json, section styles.

    "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 de module principale.

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

    @NgModule({
       imports: [NgbModule.forRoot(), ...],
    })
  • Effectuez également les opérations suivantes dans vos sous-modules si vous prévoyez 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.

JLS
la source
2
  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';

FEUJIO Marie Therese
la source
2

Étape 1:
npm install bootstrap@latest --save-dev cela 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"

kireeti9
la source
Généralement, la meilleure réponse actuelle, sauf supprimer --save-dev. Comme vous voulez que le bootstrap soit déployé avec votre application.
Sydwell
2

Pour ajouter Bootstrap et Jquery à la fois

npm install bootstrap@3 jquery --save

après avoir exécuté cette commande, veuillez continuer et vérifier votre dossier node_modules, vous devriez pouvoir y voir bootstrap et jquery ajoutés.

Alexander Zaldostanov
la source
Cool d'ajouter Jquery aussi.
Surya R Praveen
1

angular-clia maintenant une page wiki dédiée où vous pouvez trouver tout ce dont vous avez besoin. TLDR, installez bootstrapvia npmet ajoutez le lien des styles à la section "styles" de votre .angular-cli.jsonfichier

Claudiu Constantin
la source
1

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

1. installez bootstrap

npm install bootstrap tether 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"
  ],
ilia
la source
1

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.

Chanaka Fernando
la source
Qu'en est-il de le mettre dans un tableau de styles angular-cli.json? Pas nécessaire?
CodyBugstein du
Non, ce n'est pas nécéssaire. puisque nous incluons notre fichier style.css dans ce tableau. nous pouvons importer d'autres fichiers css dans notre style.css ou style.scss "@import" ~@angular/material/prebuilt-themes/indigo-pink.css ";" @import "../node_modules/bootstrap/dist/css /bootstrap.css ";
Chanaka Fernando
Ah ok .. mais je pense que l'inclusion angular-cli.jsonest probablement mieux
CodyBugstein
@CodyBugstein Je ne sais pas s'il est nécessairement "préférable" de l'ajouter à .angular-cli.json. Voici quelques raisons pour lesquelles vous souhaiterez peut-être ajouter des importations dans votre fichier styles.scss: 1) Vous pouvez facilement appliquer un thème d'amorçage comme l'exemple Bootswatch ici: github.com/thomaspark/bootswatch 2) La modification des fichiers .json est plus lourde que modification des fichiers .scss car les fichiers .json n'autorisent pas les commentaires, et 3) les nouveaux développeurs peuvent considérer styles.scss comme point de départ pour tous les CSS plutôt que .angular-cli.json.
Keith
1

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 afin 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 correctement configuré, 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, alors vous êtes bon d'utiliser boostrap. entrez la description de l'image ici

Tadele Ayelegn
la source
1

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 voulais également remplacer les variables de bootstrap.

Andris
la source
1

Si vous venez de commencer avec angular et bootstrap, la réponse simple serait les étapes ci-dessous: 1. Ajouter un package de nœuds de bootstrap comme dépendance de développement

npm install --save bootstrap
  1. importez la feuille de style bootstrap dans le fichier angular.json.

    "styles": [ "projects/my-app/src/styles.scss", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],

  2. et vous êtes prêt à utiliser le bootstrap pour le style, la grille, etc.

    <div class="container">My first bootstrap div</div>

La meilleure partie de cela que j'ai trouvée était que nous dirigions en utilisant bootstrap sans aucune dépendance de module tiers. Nous pouvons mettre à jour le bootstrap à tout moment en mettant simplement à jour la commande, npm install --save [email protected]etc.

ichbinpradnya
la source
1

Vous avez plusieurs façons d' ajouter Bootstrap 4 dans votre projet Angular :

  • Inclure les fichiers CSS et JavaScript Bootstrap dans la section du fichier index.html de votre projet Angular avec les balises et,

  • Importation du fichier CSS Bootstrap dans le fichier global styles.css de votre projet Angular avec un mot clé @import.

  • Ajout des fichiers CSS et JavaScript Bootstrap dans les tableaux de styles et de scripts du fichier angular.json de votre projet

Farid Rajab
la source
1

Exécutez cette commande

npm install bootstrap@3

votre Angular.json

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],
Vikas Katariya
la source
1

vous pouvez installer bootstrap en angulaire en utilisant la npm install bootstrapcommande.

et le prochain chemin de démarrage de la configuration dans le angular.jsonfichier et le style.cssfichier.

vous pouvez lire un blog complet sur la façon d'installer et de configurer le bootstrap en angulaire, cliquez ici pour lire le blog complet à ce sujet

bhavesh ajani
la source
0

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.

Vous trouverez plus d'informations sur les schémas d'amorçage ici .

Slupek
la source