web-dev-qa-db-fra.com

Comment ajouter bootstrap dans le projet angular 6?

app.component.html

index.html

app.component.ts J'ai essayé d'ajouter une dépendance de styles dans le paquet angular.json mais en montrant que le module était introuvable. ajout de deux des fichiers bootstrap. voici la capture d'écran des deux fichiers

le fichier angular.json est comme ceci fichier angular.json

javascripthtmlangularangular-ui-bootstrap
33
nikhil sugandh

Vous utilisez Angular v6 not 2

angulaire v6 à partir de

Les projets CLI à partir de angular 6 utiliseront angular.json au lieu de .angular-cli.json pour la construction et la configuration du projet.

Chaque espace de travail CLI a des projets, chaque projet a des cibles et chaque cible peut avoir des configurations. Docs

. {
  "projects": {
    "my-project-name": {
      "projectType": "application",
      "architect": {
        "build": {
          "configurations": {
            "production": {},
            "demo": {},
            "staging": {},
          }
        },
        "serve": {},
        "extract-i18n": {},
        "test": {},
      }
    },
    "my-project-name-e2e": {}
  },
}

OPTION-1
execute npm install bootstrap@4 jquery --save
Les parties JavaScript de Bootstrap dépendent de jQuery. Vous avez donc également besoin du fichier de bibliothèque jQueryJavaScript.

Dans votre fichier angular.json, ajoutez les chemins de fichiers au tableau de styles et de scripts sous build target
REMARQUE: Avant la v6, la configuration du projet Angular CLI était stockée dans <PATH_TO_PROJECT>/.angular-cli.json. à partir de la v6. l'emplacement du fichier a été changé en angular.json. puisqu'il n'y a plus de point en tête, le fichier n'est plus masqué par défaut et se trouve au même niveau.
, ce qui signifie également que les chemins de fichiers dans angular.json ne doivent pas contenir de points et de barres obliques

c'est-à-dire que vous pouvez fournir un chemin absolu au lieu d'un chemin relatif

Dans .angular-cli.json le chemin du fichier était "../node_modules/"
Dans angular.json c'est "node_modules/"

 "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ng6",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css","node_modules/bootstrap/dist/css/bootstrap.min.css"

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

OPTION 2
Ajoutez des fichiers de CDN (réseau de distribution de contenu) à votre projet CDN LINK

Ouvrir le fichier src/index.html et insérer

l'élément <link> à la fin de la section d'en-tête pour inclure le fichier CSS Bootstrap
a <script> élément pour inclure jQuery au bas de la section body
un élément <script> à inclure Popper.js au bas de la section body
un élément <script> pour inclure le fichier Bootstrap JavaScript au bas de la section body

  <!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Angular</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <body>
      <app-root>Loading...</app-root>
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
    </html>

OPTION 3
Exécuter npm install bootstrap
Dans src/styles.css ajoutez la ligne suivante:

@import "~bootstrap/dist/css/bootstrap.css";

OPTION-4
ng-bootstrap Il contient un ensemble de directives natives Angular basées sur celles de Bootstrap. balisage et CSS. Par conséquent, il ne dépend pas de jQuery ou du code JavaScript de Bootstrap.

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

Après l'installation, importez-le dans votre module racine et enregistrez-le dans le tableau @NgModule imports`.

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

NOTE
ng-bootstrap nécessite l'ajout des 4 css de Bootstrap dans votre projet. vous devez l'installer explicitement via:
npm install bootstrap@4 --save Dans votre fichier angular.json, ajoutez les chemins de fichiers au tableau de styles sous build target.

   "styles": [
                  "src/styles.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
   ],
124
Vikas
npm install --save bootstrap

ensuite, dans angular.json (précédemment .angular-cli.json) dans le dossier racine du projet, recherchez les styles et ajoutez le fichier bootstrap css comme suit:

"styles": [
   "../node_modules/bootstrap/dist/css/bootstrap.min.css",
   "styles.css"
],
9
jayant mishra
npm install bootstrap --save

et ajoutez les fichiers pertinents dans le fichier angular.json sous la propriété style pour les fichiers CSS et sous scripts pour les fichiers JS.

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

en utilisant la commande

    npm install bootstrap --save

open . angular.json old (. angular-cli.json) fichier trouver le " styles "ajoute le fichier css bootstrap

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