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 и JQuery:

npm install bootstrap jquery --save

Затем вы найдете эти файлы в папке вашего модуля узла:

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

Затем вы должны обновить файл 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"
  ],

Если вы не добавите скрипт jquery.min.js, Bootstrap работать не будет.

Другое требование - это popper.js, если вам нужно Раскрывающийся список начальной загрузки , тогда вам нужно будет установить его и добавить файл сценария

npm install popper.js

Затем добавьте также этот скрипт

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

Для раскрывающегося списка начальной загрузки требуется Popper.js (https://popper.js.org)

Answer 2

Вам не хватает части JavaScript и шрифтов из начальной загрузки.Вот почему вы не видите свернутую часть панели навигации.Bootstrap использует jQuery, поэтому не очень хорошо работает с angular.

Bootstrap и Angular уже интегрированы в отдельный проект.Попробуйте использовать это: https://angular -ui.github.io / bootstrap /

Answer 3

Добавьте свой 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
                        ]

и перезапустите свой проект