Использование Bootstrap 4 с Angular 4

Question

После установки Bootstrap 4 в Angular 4 появляется сообщение об ошибке: [Script Loader] Ошибка: для подсказок Bootstrap требуется Tether ( http://tether.io/). Я попытался установить привязь, передавая привязку CDN, но это не помогло.

Answer 1

Добавьте ссылку на tether.min.css в ваш файл angular-cli.json

styles": [
    "styles.css",
    "../node_modules/tether/dist/css/tether.min.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/tether/dist/js/tether.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

Answer 2

Смотрите видео или следуйте инструкциям

Установить бутстрап 4 в угловой 4 / угловой 5

Есть два способа включить загрузчик в ваш проект
1) добавить ссылку CDN в файл index.html
2) Установите загрузчик с помощью npm

Я рекомендовал вам следующие 2 метода, которые устанавливаются с помощью npm, так как он доступен в вашем каталоге проекта

1) установить загрузчик с помощью npm

npm install bootstrap@next --save

после установки Bootstrap 4 нам нужны еще два пакета javascript, а именно Jquery и Popper.js, без этих двух пакетов начальная загрузка не завершена

2) Установите JQUERY

npm install jquery --save

3) Установите Popper.js

npm install popper.js --save

Теперь Bootstrap устанавливается на вашу директорию проекта в папке node_modules

откройте .angular-cli.json, этот файл доступен в вашем угловом каталоге, откройте этот файл и добавьте путь к файлам bootstrap, jquery и popper.js внутри styles[] и scripts[], см. пример ниже

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

    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/popper.js/dist/umd/popper.min.js"
  ],

Примечание: не меняйте последовательность файла js, это должно быть так

Теперь Bootstrap работает нормально