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

Я работаю над приложением 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"
],

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

Ответы

Ответ 1

Вам необходимо сделать следующее:

Добавьте Bootstrap в package.json (это делается с помощью начальной загрузки npm --save)

Добавьте Bootstrap в 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"
  ],

Ссылка Bootstrap в приложении Angular (app.module.ts)

import bootstrap from "bootstrap";

Демо: https://codesandbox.io/s/kmm2q7zvko
Статья: https://medium.com/wdstack/angular-7-bootstrap-4-starter-25573dff23f6

Ответ 2

ОПЦИЯ 1

выполнять

npm install [email protected] 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"
]

ВАРИАНТ-2

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

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

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

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

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

npm install [email protected]  --save

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

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

Ответ 3

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

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

Только код ниже работает для меня

Не нужно менять в angular.json

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

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

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