web-dev-qa-db-fra.com

Angular 6 avec bootstrap 4.1 non chargé

Je n'arrive pas à charger bootstrap via le fichier angular.json

semblable à ce problème, cependant, rien de lié à bootstrap ne se chargera. Cependant, ng build et ng serve ne semble pas signaler d’émission. C'est juste que je navigue jusqu'à la page, il est évident que rien n'est stylé.
Bootstrap 4.1.1 La barre de navigation ne fonctionne pas avec Angular 6

[note] Revenir à [email protected] semble bien fonctionner

package.json

{
  "name": "client-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "bootstrap": "^4.1.1",
    "core-js": "^2.5.4",
    "jquery": "^3.3.1",
    "popper": "^1.0.1",
    "popper.js": "^1.14.3",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.8",
    "TypeScript": "~2.7.2",
    "@angular/cli": "~6.0.8",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }

angular.json "

styles": [
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/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"
        ]
angularbootstrap-4
4
bitshift

J'ai déjà rencontré ce problème auparavant et la solution consiste à créer @ Import '../node_modules/bootstrap/dist/css/bootstrap.css'; dans le fichier style.css en haut de tout code. alors bootstrap va se charger avec succès 

8
Menna Ramadan

Je propose d'éditer styles.css:

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

si meilleure solution très simple et efficace

1
mahmoud nassih

Je viens de l'ajouter à un projet Angular 7 et les étapes étaient les suivantes:

1- Installation de bootstrap 4:

npm install bootstrap

2- Ajoutez l'importation ci-dessous au fichier src\styles.css

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