Добавьте Bootstrap 4 в приложение Angular 6 или Angular 7 - PullRequest
Новая
       37

Добавьте Bootstrap 4 в приложение Angular 6 или Angular 7

0 голосов
/ 15 февраля 2019

Я работаю над приложением Angular с использованием начальной загрузки 4.

Мне нужна помощь, связанная с добавлением scss в мое угловое приложение.

Мой вопрос:

  • Является ли способ добавления начальной загрузки 4 scss одинаковым в Angular 6 и Angular 7 или нет?

т.е. 

npm install bootstrap --save

И, откройте файл angular.json и добавьте путь к файлу начальной загрузки в раздел стилей.Как: 

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

Вышеуказанный способ одинаков для обеих версий angular.

Ответы [ 3 ]

0 голосов
/ 15 февраля 2019

OPTION-1

execute 

npm install bootstrap@4 jquery --save

JavaScript-части Bootstrap зависят от jQuery.Поэтому вам также нужен файл библиотеки jQuery JavaScript. 

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

OPTION-2

ng-bootstrap Он содержит набор собственных директив Angular, основанных на разметке Bootstrap иCSS.В результате он не зависит от jQuery или Bootstrap JavaScript 

npm install --save @ng-bootstrap/ng-bootstrap

. После установки импортируйте его в свой корневой модуль и зарегистрируйте в массиве @NgModule import` 

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
    declarations: [AppComponent, ...],
    imports: [NgbModule.forRoot(), ...],
    bootstrap: [AppComponent]
})

ng-bootstrapтребует, чтобы Bootstrap 4 css был добавлен в ваш проект.Вам необходимо установить его явно с помощью: 

npm install bootstrap@4  --save

В вашем angular.json добавьте пути к файлу в массив стилей в целевом объекте сборки 

"styles": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
0 голосов
/ 29 августа 2019

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

Я пробовал большую часть решения через Интернет, у меня ничего не работает

У меня работает только приведенный ниже код

Нет необходимости вносить изменения в angular.json

Непосредственно добавить строку ниже в файл style.css

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

, потому что в angular.json мы уже предоставляем ссылку на style.css

0 голосов
/ 15 февраля 2019

Вам нужно сделать следующее:

Добавить Bootstrap в package.json (что делается с помощью npm install bootstrap --save)

ДобавитьНачальная загрузка до angular.json (требуется также jQuery) 

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

Ссылка Начальная загрузка в приложении Angular (app.module.ts) 

import bootstrap from "bootstrap";

Демо: https://codesandbox.io/s/kmm2q7zvko
Артикул: https://medium.com/wdstack/angular-7-bootstrap-4-starter-25573dff23f6

...