Как импортировать тему Bootstrap 4 в приложение Angular 4 или 4+

Question

Я новичок в изучении Angular.Я попытался импортировать шаблон одностраничного загрузчика 4 в angular 4. Этот: https://startbootstrap.com/template-overviews/new-age/.But, когда я вижу это на своем локальном хосте, он не загружает некоторые функции, такие как плавная прокрутка и т. Д., Выглядит как файл new-age.jsне загружается. Как это исправить?

Сохраненные файлы (css, js, jquery, bootstrap) находятся в папке src / assests.
Я связал файл в angular.json как

"styles": [
          "src/styles.css",
          "src/assets/vendor/bootstrap/css/bootstrap.min.css",
          "src/assets/vendor/font-awesome/css/font-awesome.min.css",
          "src/assets/vendor/simple-line-icons/css/simple-line-icons.css",
          "src/assets/device-mockups/device-mockups.min.css",
          "src/assets/css/new-age.min.css"
        ],
        "scripts": [
          "src/assets/vendor/jquery/jquery.min.js",
          "src/assets/vendor/bootstrap/js/bootstrap.bundle.min.js",
          "src/assets/vendor/jquery-easing/jquery.easing.min.js",
          "src/assets/js/new-age.js"
        ]

HTML находится в app.component.html

Answer 1

Попробуйте это,

Добавьте строки ниже в index.html и перед этим проверьте, есть ли папка сценариев и css в папке активов или нет. если нет, добавьте их вручную и добавьте соответствующие файлы в эти папки.

index.html:

 <link rel="stylesheet" href="assets/css/bootstrap.min.css">
 <link rel="stylesheet" href="assets/css/bootstrap-theme.min.css">
 <link rel="stylesheet" href="assets/css/font-awesome.min.css">
 <script src="assets/Scripts/bootstrap.min.js"></script>

Answer 2

Используя angular, я бы рекомендовал вместо этого использовать ng-bootstrap .Все, что вам нужно сделать, это импортировать таблицу стилей начальной загрузки в ваш angular-cli.json (и вашу личную таблицу стилей впоследствии (!)):

"styles": [
          "src/assets/vendor/bootstrap/css/bootstrap.css",
          "src/styles.css"
        ],

Затем вы импортируете ng-bootstrap в * 1006 вашего app.module.* массив, с:

NgbModule.forRoot(),

И вы можете использовать все готовые компоненты, адаптированные к угловым.