Угловой 6 с бутстрапом 4.1 не грузится

Question

Не получается загрузить загрузчик через файл angular.json

похоже на эту проблему, но ничего, связанного с начальной загрузкой, не загрузится. Однако ng build и ng serve не сообщают о каких-либо проблемах. Просто тогда я просматриваю страницу, очевидно, что ничего не разрабатывается.
Bootstrap 4.1.1 Navbar не работает с Angular 6

[ примечание ] Откат к Bootstrap@3.3.7, кажется, работает нормально

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

Answer 1

Импорт bootstrap.css совершенно не нужен, потому что это дублирование процесса. Я решил это, удалив загрузчик - Иногда конфигурации могут быть для загрузчика 3 - тогда установка самой последней версии с npm install bootstrap решает мою проблему.

Answer 2

не использовать @import '~ bootstrap / dist / css / bootstrap.css'.

Я должен решить, используя ниже @import 'bootstrap / dist / css / bootstrap.css'; в styles.css

Answer 3

Я сталкивался с этой проблемой раньше, и решение состоит в том, чтобы сделать @import '../node_modules/bootstrap/dist/css/bootstrap.css'; в файле style.css вверху любого кода. загрузчик успешно загрузится

Answer 4

Я только добавил его в проект Angular 7, и шаги были:

1 - Установка начальной загрузки 4:

npm install bootstrap

2 - добавить приведенный ниже импорт в src \ styles.css

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

Answer 5

Предлагаю отредактировать styles.css:

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

если лучшее решение очень простое и эффективное