Angular 4: Comment inclure Bootstrap?
Je suis un développeur backend et je ne fais que jouer avec Angular4. J'ai donc fait ce tutoriel d'installation: https://www.youtube.com/watch?v=cdlbFEsAGXo .
Cela dit, comment puis-je ajouter bootstrap à l'application pour pouvoir utiliser la classe "container-fluid" ou "col-md-6" et ainsi de suite?
Comme celui-ci reçoit de plus en plus de réponses, je vais marquer celui qui m'a aidé
npm install --save bootstrap
ensuite, dans angular-cli.json (dans le dossier racine du projet), recherchez styles et ajoutez le fichier css bootstrap comme suit:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
METTRE À JOUR:
dans l'angle 6+ angular-cli.json a été changé en angular.json.
Regarder la vidéo ou suivre l'étape
Installer le bootstrap 4 en angle 2/angulaire 4/angulaire 5/angulaire 6
Il y a trois façons d'inclure bootstrap dans votre projet
1) Ajouter un lien CDN dans le fichier index.html
2) Installez bootstrap en utilisant npm et définissez le chemin dans angular.jsonRecommandé
3) Installez bootstrap à l’aide de npm et définissez le chemin dans le fichier index.html
Je vous ai recommandé de suivre 2 méthodes qui sont installées bootstrap en utilisant npm car elles sont installées dans votre répertoire de projet et vous pouvez facilement y accéder.
Méthode 1
Ajoutez les chemins d’initialisation CDN Bootstrap, Jquery et popper.js à votre fichier index.html de projet angulaire.
Bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css "
Bootstrap.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js "
Jquery.js
https://code.jquery.com/jquery-3.2.1.slim.min.js
Popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js
Méthode 2
1) Installez bootstrap en utilisant npm
npm install bootstrap --save
après l'installation de Bootstrap 4, nous avons besoin de deux packages javascript supplémentaires, à savoir Jquery et Popper.js, sans ces deux packages. Bootstrap n'est pas complet car Bootstrap 4 utilise les packages Jquery et popper.js.
2) Installer JQUERY
npm install jquery --save
3) Installer Popper.js
npm install popper.js --save
Maintenant, Bootstrap est installé sur votre répertoire de projet dans le dossier node_modules
open angular.json ce fichier est disponible sur votre répertoire angulaire. Ouvrez ce fichier et ajoutez le chemin des fichiers bootstrap, jquery et popper.js dans styles [] et scripts [] path voir l'exemple ci-dessous
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
Note: Ne changez pas une séquence de fichier js, cela devrait être comme ça
Méthode 3
Installez bootstrap en utilisant npm suivez Méthode 2 dans la méthode 3, nous définissons simplement le chemin dans le fichier index.html au lieu du fichier angular.json
bootstrap.css
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css">
Jquery.js
<script src="node_modules/jquery/dist/jquery.min.js"><br>
Bootstrap.js
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"><br>
Popper.js
<script src="node_modules/popper.js/dist/umd/popper.min.js"><br>
Maintenant Bootstrap fonctionne bien maintenant
Afin de configurer la dépendance Bootstrap, nous devons installerl Dépend de Bootstrap en utilisant npm.
$ npm install [email protected] --save
Remarque: La commande --save enregistrera la dépendance dans notre application angulaire dans le fichier package.json.
Maintenant que nous avons les dépendances en place, nous pouvons dire à Angular CLI qu'il doit charger ces styles en utilisant l'une des options ci-dessous ou les deux:
option 1) Ajout dans le fichier src/styles.css
nous pouvons ajouter les dépendances comme indiqué ci-dessous:
@import "~bootstrap/dist/css/bootstrap.min.css";
Option 2) Ajout dans angular-cli.json
Nous pouvons ajouter les fichiers css de style au fichier angular-cli.json qui se trouve à dossier racine de notre application angulaire comme indiqué ci-dessous:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
]
Angular 4 - Configuration Bootstrap/@ ng-bootstrap
Commencez par installer bootstrap dans votre projet en utilisant la commande ci-dessous:
npm install --save bootstrap
Ajoutez ensuite cette ligne "../node_modules/bootstrap/dist/css/bootstrap.min.css" dans le fichier angular-cli.json (dossier racine) dans les styles
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
Après avoir installé les dépendances ci-dessus, installez ng-bootstrap via:
npm install --save @ng-bootstrap/ng-bootstrap
Une fois installé, vous devez importer le module principal.
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
Après cela, vous pouvez utiliser tous les widgets Bootstrap (ex. Carrousel, modal, popovers, info-bulles, onglets, etc.) et plusieurs autres avantages (datepicker, rating, timepicker, typeahead).
Dans Angular4 lorsque vous traitez avec @types system, vous devez procéder comme suit.
Faire,
1) npm install --save @types/jquery
2) npm install --save @types/bootstrap
tsconfig.json
recherchez types array et ajoutez jquery et bootstrap entries,
"types": [
"jquery",
"bootstrap",
"node"
]
Index.html
dans la section head, ajoutez les entrées suivantes,
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="node_modules/jquery/dist/jquery.min.js "></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js "></script>
Et commencez à utiliser jquery et bootstrap both.
veuillez vous référer à ce lien https://github.com/angular/angular-cli/wiki/stories-include-bootstrap .
il fournit des instructions étape par étape sur l’inclusion du dernier bootstrap dans votre angular 4 en utilisant angular-cli.
Pour les étapes détaillées ci-dessous et un exemple de travail, vous pouvez visiter https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/
Très détails étapes avec une explication appropriée
Étapes:Installation de Bootstrap à partir de NPM
Ensuite, nous devons installer Bootstrap. Changez le répertoire dans le projet que nous avons créé (cd angular-bootstrap-example) et exécutez la commande suivante:
Pour Bootstrap 3:
npm install bootstrap --save
Pour Bootstrap 4 (actuellement en version bêta):
npm install bootstrap@next --save
OUAlternative: CSS d'amorçage local Vous pouvez également télécharger le CSS d'amorçage et l'ajouter localement à votre projet. J'ai téléchargé Bootstrap du site Web et créé un dossier de styles (même niveau que styles.css):
Remarque: Ne placez pas vos fichiers CSS locaux dans le dossier assets. Lors de la construction de la production avec Angular CLI, les fichiers CSS déclarés dans le fichier .angular-cli.json seront réduits et tous les styles seront regroupés dans un seul fichier styles.css. Le dossier assets est copié dans le dossier dist pendant le processus de construction (le code CSS sera dupliqué). Ne placez vos fichiers CSS locaux sous des ressources que si vous les importez directement dans index.html.
Importation du CSS 1.Nous avons deux options pour importer le CSS de Bootstrap installé à partir de NPM:
strong text 1: configurez le fichier .angular-cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
2: Importer directement dans src/style.css ou src/style.scss:
@import '~bootstrap/dist/css/bootstrap.min.css';
Personnellement, je préfère importer tous mes styles dans src/style.css car ils ont déjà été déclarés dans .angular-cli.json.
3.1 Alternative: CSS d'amorçage local Si vous avez ajouté le fichier CSS d'amorçage localement, importez-le simplement au format .angular-cli.json.
"styles": [
"styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
"styles.scss"
],
ou src/style.css
@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';
4: Composants JavaScript Bootstrap avec ngx-bootstrap (Option 1) Si vous n’avez pas besoin d’utiliser des composants JavaScript Bootstrap (nécessitant JQuery), c’est toute la configuration dont vous avez besoin. Mais si vous devez utiliser des modaux, accordéon, datepicker, info-bulles ou tout autre composant, comment pouvons-nous utiliser ces composants sans installer jQuery?
Il existe une bibliothèque de wrapper angulaire pour Bootstrap appelée ngx-bootstrap que nous pouvons également installer à partir de NPM:
npm install ngx-bootstrap --save
Note ng2-bootstrap et ngx-bootstrap sont le même paquet. ng2-bootstrap a été renommé en ngx-bootstrap après #itsJustAngular.
Si vous souhaitez installer Bootstrap et ngx-bootstrap simultanément lorsque vous créez votre projet Angular CLI:
npm install bootstrap ngx-bootstrap --save
4.1: Ajout des modules Bootstrap requis dans app.module.ts
Parcourez le ngx-bootstrap et ajoutez les modules nécessaires à votre app.module.ts. Par exemple, supposons que nous voulions utiliser les composants Dropdown, Tooltip et Modal:
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [
BrowserModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot()
],
// ...
})
export class AppBootstrapModule {}
Étant donné que nous appelons la méthode .forRoot () pour chaque module (en raison des fournisseurs de modules ngx-bootstrap), les fonctionnalités seront disponibles dans tous les composants et modules de votre projet (portée globale).
Si vous souhaitez organiser le ngx-bootstrap dans un module différent (uniquement à des fins d'organisation, au cas où vous auriez besoin d'importer plusieurs modules bs et que vous ne souhaitiez pas encombrer votre app.module), vous pouvez créer un module. app-bootstrap.module.ts, importez les modules Bootstrap (à l'aide de forRoot ()) et déclarez-les également dans la section des exportations (afin qu'ils soient également disponibles pour les autres modules).
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [
CommonModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot()
],
exports: [BsDropdownModule, TooltipModule, ModalModule]
})
export class AppBootstrapModule {}
Enfin, n’oubliez pas d’importer votre module d’amorçage dans votre application app.module.ts.
import {AppBootstrapModule} de './app-bootstrap/app-bootstrap.module';
@NgModule({
imports: [BrowserModule, AppBootstrapModule],
// ...
})
export class AppModule {}
ngx-bootstrap fonctionne avec Bootstrap 3 et 4. Et j'ai également fait quelques tests et la plupart des fonctionnalités fonctionnent également avec Bootstrap 2.x (oui, j'ai encore du code hérité à maintenir).
J'espère que cela aidera quelqu'un!
Si vous utilisez Sass/Scss, suivez ceci:
Npm installer
npm install bootstrap --save
et ajoutez l'instruction import à votre fichier sass/scss,
@import '~bootstrap/dist/css/bootstrap.css'
Pour bootstrap 4.0.0-alph.6
npm install [email protected] jquery tether --save
Puis, après cela, lancez:
npm install
À présent. Ouvrez .angular-cli.json fichier et importez bootstrap, jquery et tether:
"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"
]
Et maintenant. Tu es prêt à partir.
Exécutez la commande suivante dans votre projet i.e npm install [email protected] --save
Après avoir installé la dépendance ci-dessus, exécutez la commande npm suivante qui installera le module d’amorçage npm install --save @ ng-bootstrap/ng-bootstrap
Regardez ceci pour la référence - https://github.com/ng-bootstrap/ng-bootstrap
Ajoutez l'importation suivante dans app.module import {NgbModule} à partir de '@ ng-bootstrap/ng-bootstrap'; et ajouter NgbModule aux importations
Dans votre fichier stye.css @ Import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
Testé dans Angular 7.0.0
Étape 1 - Installez les dépendances requises
npm install bootstrap (si vous voulez une version spécifique, spécifiez le numéro de version)
npm install popper.js (si vous voulez une version spécifique, spécifiez le numéro de version)
npm installer jquery
Les versions que j'ai essayées:
"bootstrap": "^4.1.3",
"popper.js": "^1.14.5",
"jquery": "^3.3.1",
Étape 2: Spécifiez les bibliothèques dans l'ordre ci-dessous dans angular.json. Dans la dernière version angulaire, le nom du fichier de configuration est angular.json et non angular-cli.json.
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/client",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},
Étape 1: Npm installez bootstrap --save
Étape: 2: Collez le code ci-dessous dans angular.json Module_noeud/bootstrap/dist/css/bootstrap.min.css
Étape 3: Ng servir
Angular 6 CLI, faites juste:
ng add @ ng-bootstrap/schematics
Si vous voulez utiliser bootstrap en ligne et que votre application a accès à Internet, vous pouvez ajouter
@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');
Dans votre fichier principal style.css. et c'est la manière la plus simple.
Référence: angular.io
Remarque. Cette solution charge le démarrage du site Web unpkg et nécessite un accès Internet.
installez d'abord bootstrap dans votre projet à l'aide de npm npm i bootstrap après avoir ouvert le fichier style.css dans votre projet et ajoutez cette ligne
@import "~bootstrap/dist/css/bootstrap.css";
et c'est tout bootstrap ajouté dans votre projet
| * | Installation de Bootstrap 4 pour Angular 2, 4, 5, 6 +:
| +> Installer Bootstrap avec npm
npm install bootstrap --save
npm install popper.js --save
| +> Ajouter des styles et des scripts à angular.json
"architect": [{
...
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
...
}]
Pour installer la dernière utilisation $ npm i --save bootstrap @ next
Comme je peux le voir, vous avez déjà reçu beaucoup de réponses, mais vous pouvez essayer cette méthode.
Sa meilleure pratique de ne pas utiliser jquery dans angular, je préfère https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md method to install bootstrap sans utiliser le composant bootstrap js qui dépend de jquery.
npm install ngx-bootstrap bootstrap --save
Gardez votre code libre dans angular
ajouter dans angular-cli.json
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
Ce sera un travail, je l'ai vérifié.