Bootstrap не работает должным образом в Angular 6

Question

Я начал изучать Angular и следую инструкциям.Я попытался поместить код, как в учебнике для панели навигации:

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

Но все, что я получаю, это:

Если я удаляю начальную загрузку, я получаю другие элементы.

Я использовал npm install bootstrap --save и @import "~bootstrap/dist/css/bootstrap.css"; в styles.css для использования начальной загрузки.

РЕДАКТИРОВАТЬ:

Я не хотел открывать вопрос с двумя проблемами, но, посмотрев на ответы, пока плохо опишу еще одну проблему, с которой я столкнулся:

Я также установил Jquery с помощью nmp install jquery --save и добавилto 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"

В этом случае после удаления @import "~bootstrap/dist/css/bootstrap.css"; из styles.css` bootstrap вообще не работает.Единственный способ заставить загрузчик работать, как я описал в этом вопросе.

РЕДАКТИРОВАТЬ 2:

Я начал новый проект и следовал инструкциям ответа @HDJEMAI.Теперь я по-прежнему получаю ту же страницу, что и на рисунке, но теперь она работает через строки, добавленные к стилям и сценариям в angular.json, а не через @import "~bootstrap/dist/css/bootstrap.css" в файле styles.css.Но проблема все еще в том, что это не то же самое, что в учебнике, хотя код тот же.

Вот что он получает в учебнике:

Answer 1

Bootstrap не работает должным образом в Angular 6/7/8

Я пробовал большую часть решения через Интернет, у меня ничего не работает

У меня работает только приведенный ниже код

Нет необходимости изменять в angular.json

Непосредственно добавить строку ниже в файл style.css

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

, потому что в angular.json мы уже предоставляем ссылку на style.css

Answer 2

После установки загрузчика и добавления его в файл angular.json.

Если загрузчик не отображает, просто измените URL-адрес порта разработки:

ng serve --port <your choice of port>

Answer 3

Альтернативным и более простым подходом для добавления начальной загрузки является размещение ссылки CDN в разделе head файла index.html (в этом случае нет необходимости устанавливать загрузку через npm):

link rel= "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"

Это будет работать !!

Answer 4

Как я вижу, если вы читаете курс "Максимилиана Шварцмюллера" в UDEMY, убедитесь, что вы установили Bootstrap 3, а не что-нибудь еще.Используйте эти команды в папке вашего проекта (удалить, только если установлены другие версии).

npm uninstall --save bootstrap
npm install --save bootstrap@3

Это установит его локально в ваш проект.

У меня установлен Bootstrap4 (думая, что курсвсе равно будет работать с 4 вместо 3) и использование Bootstrap3 вместо этого работало в том же проекте, что и вы в курсе (без popper и jQuery).

Answer 5

Я сделал то же самое, что указано в ответах выше, но все еще столкнулся с той же проблемой.В моем случае я имел в виду неправильный путь popper.js в angular.json

"node_modules/popper.js/dist/js/popper.js",

вместо

"node_modules/popper.js/dist/umd/js/popper.js",

Answer 6

У меня была такая же проблема.Мне помогло ниже.

Остановите сервер и перекомпилируйте с помощью ng serve

Answer 7

install npm install bootstrap@latest jquery --save
install npm install popper.js;

затем перейдите в файл Angular.json (строка № 47) и измените строки следующим образом:

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

Answer 8

Вышеуказанный метод хорош, но иногда он работает, иногда нет, даже если вы все делаете правильно.Лично я предпочитаю загружать css / js вручную, хранить их в папке активов и размещать там ссылки в index.html.Если что-то пойдет не так, консоль браузера сообщит вам о проблеме, тогда как при обычном подходе консоль браузера не предоставляет никакой информации / ошибки.

Answer 9

For bootstrap to work you need to add jQuery and popper,

Using NPM to install bootstrap,jQuery and popper

1) Install bootstrap
npm install bootstrap --save

2) Install jQuery
npm install jquery --save

3) Install Popper
npm install popper.js --save

4) Check if the respective files were installed in node_modules folder
5) In angular.json file provide the path of the installed files in the same order as below:- 

    "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)In angular.json file
 provide the path of the bootstrap css as below:- 

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

6) Run ng serve again, Bootstrap should work now!!

Answer 10

дорогой друг, я изучаю тот же учебник angular6.Я также столкнулся с такой же ситуацией. Наконец-то я решил эту первую загрузку удаления.Следующий шаг - установить bootstrap, выполнив команду

npm install --save bootstrap@3 A

, затем перейдите в styles.css и вставьте

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

, ваше приложение будет работать точно так же, как в этом видеоуроке udemy.