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).

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.

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

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

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

4. 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'
  }
};

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.

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

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

É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.

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.

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>

É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

5. ouvert src/app/app.component.html
6. 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/ )

7. enregistrez le fichier

8. 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

É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

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

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

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

Essaye ça

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 du bootstrap à votre projet généré par Angular-Cli. https://www.youtube.com/watch?v=obbdFFbjLIU (environ 13h00 minutes)

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

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é.

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.

1. Installez bootstrap, popper.js

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

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

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

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

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.

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

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

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.

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.

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.

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

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

3. 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.

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

Exécutez cette commande

npm install bootstrap@3

votre Angular.json

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

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

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 .