à la recherche du mot clé > Installation globale de la bibliothèque sur https://github.com/angular/angular-cli vous aide à trouver la réponse.

selon leur document, vous pouvez prendre les mesures suivantes pour ajouter Bootstrap library.

première installation de Bootstrap à partir de npm:

npm install bootstrap@next

ajoute ensuite les fichiers de script nécessaires à l'application[0].scripts en angular-cli.dossier json:

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

ajoute enfin le Bootstrap CSS aux applications[0].les styles de tableau:

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

redémarrez ng Server 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 fonctionne jamais. Il est fortement recommandé de faire cette dernière action.

Faire ce qui suit:

npm i bootstrap@next --save

cela ajoutera bootstrap 4 à votre projet.

passez ensuite à votre fichier src/style.scss ou src/style.css (choisissez celui que vous utilisez) et importez 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 quand même ajouter le fichier dans l'angular-cli.fichier json comme ( Dans la version angulaire 6, Cette édition doit être faite 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"
],

dans un premier temps, 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 ajouter ces lignes dans votre angle-cli.json (angulaire.JSON à partir de la version 6) fichier

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

Update v1.0.0-bêta.26

vous pouvez voir sur le doc pour 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 moins versions:

dans votre index.vous avez juste besoin de bootstrap CSS link (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 my_project/angulaires-cli-construire.js:

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

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

ng build

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

puisque personne n'a fait référence à l'histoire officielle (angular-cli team) sur la façon d'inclure Bootstrap encore: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Include Bootstrap

Bootstrap est un cadre CSS populaire qui peut être utilisé dans un projet angulaire. Ce guide vous guidera à travers l'ajout de bootstrap à votre CLIP angulaire projeter et configurer pour utiliser bootstrap.

utilisant CSS

Pour 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 à votre projet en tant que dépendance. En utilisant l'option --save , la dépendance sera sauvegardée dans le paquet.json

# version 3.x
npm install bootstrap --save

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

Configurer Le Projet

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

• Ouvrir le fichier .angular-cli.json à partir de la racine de votre projet.
• sous la propriété apps le premier élément dans ce tableau est l'application par défaut.
• Il y a une propriété styles qui permet à l'externe les styles globaux pour être appliqué à votre application.
• spécifier le chemin vers bootstrap.min.css

il doit ressembler à ce qui suit quand vous êtes fait:

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

Note: lorsque vous apportez des changements à .angular-cli.json , vous devez redémarrer ng serve pour prendre les changements de configuration.

Le Projet De Tests

ouvrir app.component.html et ajouter le texte suivant:

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

avec l'application configurée, Lancez 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 Style bootstrap apparaît.

utilisant SASS

Pour 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

Configurer Le Projet

créer un fichier vide _variables.scss dans src/ .

si vous utilisez bootstrap-sass , ajouter ce qui suit à _variables.scss :

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

dans styles.scss ajouter 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';

Le Projet De Tests

ouvert app.component.html et ajouter le balisage suivant:

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

avec l'application configurée, Lancez 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 Style bootstrap apparaît. Pour vous assurer que vos variables sont utilisées, ouvrez _variables.scss et ajoutez ce qui suit:

$brand-primary: red;

retourner le navigateur pour voir la couleur de la police changé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

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-amorçage et d'amorçage

npm install ng2-bootstrap bootstrap --save

ouvert src/app / app.module.et ajouter

import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
   ...
   imports: [AlertModule, ... ],
    ... 
})

ouvrir angulaires-cli.json et insérer une nouvelle entrée dans le tableau de styles

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

ouvrir src/app/app.composant.html et tester tous les travaux en ajoutant

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

depuis que cela est devenu tellement confus et les réponses ici sont totalement mélangées je vais juste suggérer d'aller avec le ui-team officiel pour BS4 repo (Oui Il ya tellement de ces repos pour NG-Bootstrap.

suivez les instructions ici https://github.com/ng-bootstrap/ng-bootstrap pour avoir BS4.

citation de la lib:

cette bibliothèque est en cours construit à partir de rien par l'équipe de l'ui-bootstrap. Nous utilisez le script et ciblez le cadre CSS Bootstrap 4.

comme pour Bootstrap 4, cette bibliothèque est un travail en cours. Veuillez vérifier notre liste de questions pour voir toutes les choses que nous mettons en œuvre. Sentir libre à vous de faire des commentaires.

il suffit de copier ce qui est là pour le bien de lui:

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

une fois installé, vous devez importer nos module principal:

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

la seule partie restante est d'énumérer le module importé dans votre module d'application. La méthode exacte sera légèrement différente pour le module root (niveau supérieur) pour lequel vous devriez finir avec le code similaire à (noter NgbModule.forRoot ()):

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

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

D'autres modules dans 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

procédure de Bootstrap 4 Angulaire 5

1. Créer Angulaire 5 Projet

   ng new AngularBootstrapTest

2. passer à l'Annuaire des projets

   cd AngularBootstrapTest

3. télécharger bootstrap

   npm install bootstrap

4. ajouter Bootstrap au projet

   4.1 ouvert .angulaire de la 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 bootstrap css angulaire 5 projet

test bootstrap

5. ouvrir src/app/app.component.html
6. ajouter bootstrap composant bouton

.

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

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

7. enregistrer le fichier

8. exécuter le projet

   ng servir d'ouvrir

Maintenant, vous verrez le bouton bootstrap style dans la page

Note : si vous avez ajouté bootstrap path après ng serve , vous devez arrêter et ré-exécuter le service ng pour refléter les changements

Faire les étapes suivantes:

1. npm install --save bootstrap

2. et dans votre .angulaire de la cli.json, ajouter à la section styles:

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

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

Profiter

1. Installer bootstrap

    npm install bootstrap@next
   

2.Ajouter du code pour .angulaire de la 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. dernier ajouter bootstrap.css à votre style de code.scss

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

4. redémarrer votre serveur local

Essayez cette

npm install bootstrap@next

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

vous pouvez également regarder cette vidéo de Mike Brocchi qui contient des informations utiles sur la façon d'ajouter 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 le texte suivant: 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 le nouveau ng-bootstrap 1.0.0-beta.La version 5 supporte la plupart des directives angulaires natives basées sur le markup de Bootstrap et CSS.

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

ng-bootstrap doit remplacer complètement L'implémentation JavaScript pour les composants. Si vous n'avez pas besoin pour inclure bootstrap.min.js dans la section scripts dans votre.angulaire de la cli.json.

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

• comprend par personne bootstrap.min.css dans votre .angulaire de la cli.json, section styles.

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

• Installer ng-bootstrap la dépendance.

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

• ajoutez ceci à votre classe de module principale.

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

• incluez ce qui suit dans votre section importations du module principal.

  @NgModule({
     imports: [NgbModule.forRoot(), ...],
  })
  

• faites ce qui suit également dans votre(s) sous-module (s) si vous allez utiliser des composants ng-bootstrap à l'intérieur de ces classes de modules.

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

• maintenant votre projet est prêt à utiliser les composants ng-bootstrap disponibles.

ouvrir l'invite Terminal/commande dans le répertoire de projet respectif et taper la commande suivante.

npm install --save bootstrap

alors ouvrez .angulaire de la cli.fichier json, rechercher

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

remplacer par

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

terminé.

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 styles à la section" styles "dans votre .angular-cli.json file

exemple pratique en cas d'utilisation d'angular-cli et css:

1.installer bootstrap

npm install bootstrap tether jquery --save

2.ajouter à .angulaire de la 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

vérifiez ensuite votre dossier node_modules pour boostrap.fichier css(dans dist) normalement, le chemin d'accès est

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

ajouter ce boostrap path | import dans le style.css ou le style.scss

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

c'est ça.

1. installez bootstrap, popper.js

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

3. Dans src/styles.css , importer des fichiers d'amorce du style

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

exemple pratique 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.

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

1. installent Bootstrap using npm

   npm install bootstrap
   

2.Installer Popper.js

npm install --save popper.js

3.Goto angular.json dans Angulaire 6 projet / .angulaire de la cli.json en angle 5 et ajouter la liste suivante:

 "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 à l'intérieur du 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

signifie que boostrap 4 est installé avec succès. Cependant, pour l'utiliser, vous devez mettre à jour les "styles" tableau sous l'angle de.fichier json.

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

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

à faire bien sûr 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 below , alors vous êtes bon à utiliser boostrap.

installer 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 coller le chemin d'accès complet(comme nodemodules/bootstrap/css/bootstrap.min.css.js ) dans angular.json en vertu de la balise de script de fichiers et ré-exécutez le serveur et pour vérifier si l'installation est réussie exécuter le programme dans le navigateur de votre choix et appuyez sur la touche F12, vous découvrirez une partie de la fenêtre est ouvert,maintenant, allez à l'onglet éléments ouvrir la balise head et si vous voyez bootstrap dans le style de la balise,puis votre l'installation est réussie.