web-dev-qa-db-fra.com

Bootstrap ne fonctionne pas correctement dans Angular 6

J'ai commencé à apprendre Angular et je suis un tutoriel. J'ai essayé de mettre le code comme dans le tutoriel pour la barre de navigation:

<nav class="navbar navbar-default">
  <div class="container-fluid">
     <div class="navbar-header">
          <a href="#" class="navbar-brand">Recipe book</a>
     </div>
     <div class="collapse navbar-collapse">
         <ul class="nav navbar-nav">
             <li> <a href="#">Recipe</a></li>
             <li> <a href="#">Shopping list</a></li>
         </ul>
         <ul class="nav navbar-nav navbar-right">
              <li class="dropdown">
                  <ul class="dropdown-menu">
                      <li><a href="#">Save data </a></li>
                      <li><a href="#">Fetch data </a></li>
                  </ul>
              </li>
         </ul>
     </div>
  </div>
</nav>

Mais tout ce que je reçois, c'est ceci:

 enter image description here

Si je supprime bootstrap, je récupère les autres éléments.

J'ai utilisé npm install bootstrap --save et @import "~bootstrap/dist/css/bootstrap.css"; dans styles.css pour utiliser bootstrap.

EDIT: Je ne voulais pas ouvrir une question avec deux problèmes, mais après avoir examiné les réponses jusqu’à présent, décrivais un autre problème que j’avais: J'ai également installé Jquery en utilisant nmp install jquery --save et ajouté à angular. json:

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.css",
          "src/styles.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/tether/dist/js/tether.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"

Dans ce cas, après avoir retiré @import "~bootstrap/dist/css/bootstrap.css"; de styles.css`, le bootstrap ne fonctionne pas du tout ... Le seul moyen pour que bootstrap fonctionne est celui décrit dans la question.

EDIT 2: J’ai lancé un nouveau projet et suivi les instructions de réponse de @HDJEMAI . La page est toujours la même que dans l’image, mais elle fonctionne à travers les lignes ajoutées aux styles et aux scripts dans angular.json et non par le @import "~bootstrap/dist/css/bootstrap.css" dans le fichier styles.css. Mais le problème est toujours que ce n'est pas la même chose que dans le tutoriel même si le code est le même . C'est ce qu'il obtient dans le tutoriel:  enter image description here

cssangularbootstrap-4angular6
2
ATT

Vous devez installer à la fois bootstrap et JQuery:

npm install bootstrap jquery --save

Ensuite, vous trouverez ces fichiers dans le dossier de votre module de nœud:

node_modules/jquery/dist/jquery.min.js
node_modules/bootstrap/dist/css/bootstrap.min.css
node_modules/bootstrap/dist/js/bootstrap.min.js

Ensuite, vous devez mettre à jour votre fichier angular.json:

"styles": [
    "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"
  ],

Si vous n’ajoutez pas le script jquery.min.js, Bootstrap ne fonctionnera pas.

Une autre exigence est popper.js si vous avez besoin de Bootstrap dropdown, vous devrez l'installer et ajouter le fichier de script

npm install popper.js

Ajoutez ensuite ce script 

"styles": [
    "styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/popper.js"
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

Le menu déroulant de démarrage nécessite Popper.js (https://popper.js.org)

3
HDJEMAI

cher ami, je suis en train d’étudier le même tutoriel angular6 . J'ai aussi été confronté à la même situation.

npm install --save bootstrap@3 A

ensuite, allez dans styles.css et collez

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

votre application fonctionnera sans aucun doute exactement comme celle de ce tutoriel vidéo d'udemy

3
baiju krishnan

Pour que le bootstrap fonctionne, vous devez ajouter jQuery et popper,

Utilisation de NPM pour installer bootstrap, jQuery et popper

1) Installez bootstrap Npm install bootstrap --save

2) Installez jQuery Npm install jquery --save

3) Installez Popper Npm install popper.js --save

4) Vérifiez si les fichiers respectifs ont été installés dans le dossier node_modules 5) Dans le fichier angular.json, indiquez le chemin des fichiers installés dans le même ordre que ci-dessous: - 

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

5) Lancer à nouveau le service, Bootstrap devrait fonctionner maintenant !!

0
Nithin Samuel

Ajoutez votre angular.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "xtreme-admin-angular": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {},
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/xtreme-admin-angular",
                        "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/bootstrap.min.css"
                             //Your root depend this path
                        ]

Et relancez votre projet

0
Jai Kumaresh

Il vous manque une partie JavaScript et les polices de bootstrap. C'est la raison pour laquelle vous ne voyez pas la partie réduite de la barre de navigation. Bootstrap utilise jQuery, donc ne fonctionne pas trop bien avec angular.

Bootstrap et Angular ont déjà été intégrés dans un projet séparé. Essayez d’utiliser ceci: https://angular-ui.github.io/bootstrap/

0
mbuechmann