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

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

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

Вы должны установите как 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:

В разделах architect, build или даже test, если вы хотите увидеть, что Bootstrap также работает при тестировании приложения.

"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, если вам нужен Выпадающее меню Bootstrap, вам нужно будет установить его и также добавить файл сценария

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

В раскрывающемся списке Bootstrap требуется Popper.js (https://popper.js.org)

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

npm install --save bootstrap@3 A

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

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

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

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

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

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

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

вместо того

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

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

Остановите сервер и перекомпилируйте, используя нг подавать

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

ссылка rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"

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

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

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

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

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

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

Если bootstrap не отображается, просто измените порт URL разработки:

ng serve --port <your choice of port>

Я думаю, это из-за проблемы с загрузкой, попробуйте следующее:

Шаг 1. Внутри файла .angular-cli.json

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

Удалить "../node_modules/bootstrap/dist/css/bootstrap.min.css"

Шаг 2. Перейти к styles.css

Импортируйте бутстрап, добавив эту строку

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

Эти шаги устранили ошибки, которые я получил в процессе сборки.

Устал от многих вещей, но вот что сработало для меня сегодня:

package.json

  "dependencies": {
    "@angular/animations": "~8.2.5",
    "@angular/common": "~8.2.5",
    "@angular/compiler": "~8.2.5",
    "@angular/core": "~8.2.5",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "~8.2.5",
    "@angular/platform-browser": "~8.2.5",
    "@angular/platform-browser-dynamic": "~8.2.5",
    "@angular/router": "~8.2.5",
    "bootstrap": "^4.3.1",
    "bootstrap-sass": "^3.3.7",
    "firebase": "^6.6.0",
    "jquery": "^3.4.1",
    "moment": "^2.24.0",
    "node-sass": "^4.11.0",
    "popper.js": "^1.15.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  }

angular.json

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

Я проверяю много способов

"../"... или "./"... или / также я не хочу использовать в "style.css", потому что, возможно, захочу добавить некоторые файлы "js" или файлы "css", которые зависят от файла "js" по этой причине лучший способ был

 "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/umd/popper.min.js",
                        "node_modules/bootstrap/dist/js/bootstrap.min.js"
                    ]

НО перезагрузите компьютер не только браузер или IDE

Добавьте эти 3 ссылки в свой файл index.html. Вам не нужно устанавливать bootstrap или jquery или обновлять файл angular.json. Работает как оберег.

    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

Если вы добавляете путь начальной загрузки в файл angular.json, убедитесь, что это стили в проекте \ architecture \ строить. Не тот, что в проекте \ архитектор \ тестовое задание.

{
"projects": {
        "architect": {
            "build": {
                    "styles": [
                        "node_modules/bootstrap/dist/bootstrap.min.css",
                         "src/styles.css"
                    ],
            "test": {
                    "styles": [
                         "src/styles.css"
                    ],

Были те же проблемы с элементами начальной загрузки с использованием редактора кода VS. Я пробовал ng build до того, как ng serve, и элементы начальной загрузки работали нормально.

Я столкнулся с той же проблемой, и я также следовал тому же курсу от udemy, добавив класс «nav-expand-lg» во внешний тег навигации, решивший мою проблему. мой файл angular.json также такой же, как ответил @HDJEMAI

<nav class = "navbar nav-expand-lg 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>

Я бы начал с проверки "стилей" и "скриптов" в разделах "строить" и "test".

Я также столкнулся с этой же проблемой. После долгих проб и ошибок я наконец понял, что проблема связана с использованием синтаксиса bootstrap 3 с библиотекой bootstrap 4. Проверьте версию начальной загрузки в package.json, а затем определите синтаксис начальной загрузки. Обновите этот <nav class = "navbar navbar-expand-sm bg-dark navbar-dark">, и ваш код должен работать.

Добавьте эту строку в style.css, и она заработает.

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

Спасибо

Пожалуйста, проверьте все ваши файлы .component.ts, особенно recipe.component.ts.. Возможно, есть настройка инкапсуляции CSS, например

@Component({
  selector: 'app-recipes',
  templateUrl: './recipes.component.html',
  styleUrls: ['./recipes.component.css'],
  encapsulation: ViewEncapsulation.ShadowDom
})

Если это так. Вы должны удалить свойство инкапсуляции.

Мне пришлось сделать и то, и другое: скопировать jquery-файлы node_modules и js-файлы начальной загрузки в angular.json.

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

И копируем @import "~bootstrap/dist/css/bootstrap.css"; в styles.css

Со своей стороны, я решил эту проблему, добавив следующее в файл "style.css", и это сработало.

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