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

Я новичок в изучении Angular. Я попытался импортировать одностраничный шаблон bootstrap 4 в angular 4. Этот: https://startbootstrap.com/template-overviews/new-age/. Но когда я вижу это на своем локальном хосте, он не загружает некоторые функции, такие как плавная прокрутка и т. Д.. Кажется, что файл 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


angular jquery bootstrap-4 angular6 angular5
person user9084186    schedule 15.05.2018    source источник
comment
вам нужно включить свой код, чтобы кто-нибудь понял, в чем проблема, и потенциально помог вам.   -  person Sunny Gohil    schedule 15.05.2018
comment
Проверьте ng-bootstrap, используйте его в своем проекте, а затем импортируйте свой собственный CSS.   -  person Malcor    schedule 15.05.2018
comment
Иногда порядок импорта файлов js также имеет значение.   -  person Srinivasan K K    schedule 15.05.2018

Ответы (2)


arrow_upward
2
arrow_downward

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

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

Затем вы импортируете ng-bootstrap в массив import вашего app.module с помощью:

NgbModule.forRoot(),

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

person baao    schedule 15.05.2018

arrow_upward
1
arrow_downward

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

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

индекс.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>
person Karthic G    schedule 15.05.2018