Angular 4: как включить Bootstrap?

npm install --save bootstrap

После этого в файле angular-cli.json (в корневой папке проекта) найдите styles и добавьте файл bootstrap css следующим образом:

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

UPDATE:
в angular 6+ angular-cli.json был заменен на angular.json.

Смотреть видео или следуйте шаг

[Установить загрузочный 4 в 2 угловой / угловой 4 / 5 угловой / угловой 6][1]

Есть три способа, как Bootstrap в вашем проекте <БР>

1. Добавить ссылку CDN в файл index.html <БР>
2. установить загрузчик с помощью npm и установить путь в угловые.в JSON рекомендуется<БР>
3. установить загрузчик с помощью npm и установить путь в файл index.html

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

Способ 1<БР><БР> Добавить в Bootstrap, jQuery и пути popper.js CDN для вас угловые файл проекта index.html

Бутстрап.в CSS<БР> https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" Бутстрап.Яш<БР> https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" <БР> На jQuery.Яш<БР> https://code.jquery.com/jquery-3.2.1.slim.min.js<БР> Попер.Яш<БР> https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js<БР>

Способ 2<БР><БР>

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

npm install bootstrap --save

после установки загрузчик 4, нам нужно еще два пакета сценариев JavaScript, JQuery и Popper.js без этих двух загрузочный пакет не полный, так как загрузчик 4 использует jQuery и пакет popper.js поэтому мы должны установить так же

2. установить библиотеку jQuery

npm install jquery --save

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

npm install popper.js --save

Теперь Bootstrap-это установить на ваш проект каталога внутри папки node_modules папка

открыть угловые.в JSON этот файл доступны вам угловые каталог, откройте этот файл и добавьте путь бутстрап, jQuery и popper.js файлы внутри стили[] и сценарии[] путь см. ниже пример

"styles": [   
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.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"
  ],

Примечание: Дон't изменить последовательность JS файл, так и должно быть

Способ 3<БР><БР> Установить загрузчик с помощью npm следовать Способ 2 в 3 метода мы просто установить путь внутри index.html файла вместо угловые.в JSON файл

бутстрап.УСБ

Jquery.js

<script src="node_modules/jquery/dist/jquery.min.js"><br>

Bootstrap.js

<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"><br>

Popper.js

<script src="node_modules/popper.js/dist/umd/popper.min.js"><br>

Теперь загрузочный работаем теперь хорошо

В целях настраивать/интегрировать/использование Bootstrap в угловой, в первую очередь надо установить загрузочный пакет с помощью npm.

Установите пакет

$ npm install bootstrap@4.0.0-alpha.6 --save   // for specific version
or
$ npm install bootstrap --save   // for latest version

Примечание: - сохранить команда сохранить зависимость в наши угловые приложение внутри пакета.JSON-файл.

теперь у нас есть пакет установлен с выше шаг, Теперь мы можем сказать углового Кинк что он должен загрузить эти стили с помощью любого из указанных ниже вариантов или оба:

Вариант 1) добавив в файл src/стили.УСБ

мы можем добавить зависимости, как показано ниже:

@import "~bootstrap/dist/css/bootstrap.min.css";

Вариант 2) при добавлении в угловых-Кинк.JSON или угловые.в JSON

мы можем добавить стиль CSS файлы в угловых-Кинк.JSON или угловые.JSON-файл, который находится в В корневой папке нашего углового приложение, как показано ниже:

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

Угловой 4 - загрузочный / @НГ-начальной установки

Сначала установить загрузки на ваш проект, используя следующую команду:

НПМ установки --Save прихлоп

Затем добавьте эту строку в "../node_modules, в/загрузки/дист/УСБ/начальной загрузки.мин.Усс" в угловой-Кинк.JSON-файл (корневой каталог) в стилях

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

После установки указанной выше зависимости, установите НГ-прихлоп через:

НПМ установки --Save @НГ-загрузочный/НГ-прихлоп

После установки вам нужно для импорта основной модуль.

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

После этого, вы можете использовать все загрузки виджетов (экс. карусели, модальные, вспомогательные экраны, подсказки, вкладки и т. д.) и несколько дополнительных вкусностей ( элемент управления datepicker, рейтинг, элемента управления datepicker, машинописный).

В Angular4, когда вы работаете с системой @types, вы должны выполнить следующие действия,

Сделать,

1) npm install --save @types/jquery
2) npm install --save @types/bootstrap

tsconfig.json

найдите массив types и добавьте записи jquery и bootstrap,

"types": [
      "jquery",
      "bootstrap",  
      "node"
]

Index.html

в разделе head добавьте следующие записи,

  <script src="node_modules/jquery/dist/jquery.min.js "></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.js "></script>

И начните использовать jquery и bootstrap.

Как это все больше и больше ответов Я'МР случаю, который помог мне:

https://stackoverflow.com/questions/37649164/how-to-add-bootstrap-to-an-angular-cli-project

пожалуйста, обратитесь по этой ссылке https://github.com/angular/angular-cli/wiki/stories-include-bootstrap.

это обеспечивает шаг за шагом Инструкции о том числе новейших Bootstrap в свой угловой 4, используя угловые-Кинк.

Если вы используете Сасс/SCSS, а затем следовать этому,

Сделать НПМ установки

npm install bootstrap --save

и добавить "импорт" заявление в ваш файл Sass/SCSS по,

@import '~bootstrap/dist/css/bootstrap.css'

Испытания В Угловой 7.0.0

Шаг 1 - установить требуемые зависимости

НПМ установить загрузчик (если вы хотите конкретную версию пожалуйста, укажите версии нет.)

НПМ установки popper.js (если вы хотите конкретную версию пожалуйста, укажите версии нет.)

НПМ установить на jQuery

Варианты я пробовал:

"bootstrap": "^4.1.3",
"popper.js": "^1.14.5",
"jquery": "^3.3.1",

Шаг 2 : указать библиотеки в порядок, угловые.в JSON. В последний угловой , конфиг это файл угловой.в JSON не угловая-Кинк.в JSON

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/client",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
             "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.scss"
            ],
            "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"
            ]
          },

Ниже дается подробное описание и рабочий пример вы можете здесь https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/

Очень подробно описываются действия при правильном объяснении.

Действия: Установка загрузки с НПМ

Далее нам нужно установить загрузчик. Перейдите в каталог проекта мы создали (компакт угловой-загрузки-пример) и выполните следующую команду:

Для Bootstrap 3:

npm install bootstrap --save

Для Bootstrap 4 (в настоящее время в бета-версии):

npm install bootstrap@next --save

Или Альтернативный вариант: местной начальной загрузки CSS В качестве альтернативы, вы также можете загрузить файл Bootstrap CSS и добавить его локально на свой проект. Я закаченными загрузки с веб-сайта и создали стили папку (на уровне стилей.в CSS):

Примечание: Не размещайте ваши местные CSS-файлы в папке активов. Когда мы делаем производство сборки с угловым командной строки, файлы CSS, объявленные в .угловые-Кинк.JSON будет минифицировать и все стили будут объединены в одном стили.УСБ. Папке Assets скопировать в папку dist в процессе сборки (CSS-код будет дублироваться). Единственное место, ваши локальные файлы CSS под активы в случае их импорта напрямую в index.html.

Импорт УСБ 1.У нас есть два варианта, чтобы импортировать CSS от Bootstrap, который был установлен с НПМ:

сильный текст1: Настройка .угловые-Кинк.в JSON:

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

2: импорт напрямую в src/стиль.CSS или в src/стиль.СКС:

@import '~bootstrap/dist/css/bootstrap.min.css';

Я лично предпочитаю, чтобы импортировать все стили в src/стиль.в CSS, так как это было объявлено в .угловые-Кинк.уже в JSON.

3.1 вариант: местной начальной загрузки CSS Если вы добавили на Bootstrap CSS-файл локально, просто импортировать его в .угловые-Кинк.в JSON

"styles": [
  "styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
  "styles.scss"
],

или в src/стиль.УСБ

@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';

4: компоненты начальной загрузки JavaScript с фабриката необходмо предусмотреть-ушко (Вариант 1) В случае, если вам не нужно использовать компоненты начальной загрузки JavaScript (что требуется библиотека jQuery), это все установки. Но если вам нужно использовать модальные глаголы, аккордеон, отмечать, подсказки или любой другой компонент, как мы можем использовать эти компоненты без установки на jQuery?

Существует угловая библиотека обертка для Bootstrap под названием фабриката необходмо предусмотреть-Bootstrap, который мы также можем установить с НПМ:

npm install ngx-bootstrap --save

Примечаниенг2-Bootstrap и фабриката необходмо предусмотреть-загрузочный такие же пакета. нг2-прихлоп был переименован в фабриката необходмо предусмотреть-прихлоп после itsJustAngular#.

В случае, если вы хотите установить Bootstrap и фабриката необходмо предусмотреть-Bootstrap в то же время, когда вы создаете свой проект угловой командной строки:

npm install bootstrap ngx-bootstrap --save

4.1. добавление необходимых модулей загрузки в приложение.модуль.ТС

Пройти фабриката необходмо предусмотреть-Bootstrap и добавить модули, необходимые в вашем приложении.модуль.ТС. Например, предположим, что мы хотим использовать раскрывающийся список, подсказки и модальные компоненты:

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    BrowserModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  // ...
})
export class AppBootstrapModule {}

Потому что мы называем .forRoot() метод для каждого модуля (из-за фабриката необходмо предусмотреть-провайдеров загрузочный модуль), функциональные возможности будут доступны для всех компонентов и модулей проекта (глобальный масштаб).

В качестве альтернативы, если вы хотите организовать фабриката необходмо предусмотреть-прихлоп в другом модуле (только для целей организации в случае, если вам нужно импортировать модули БС и не хочу захламлять ваше приложение.модуль), вы можете создать приложение-загрузочный модуль.модуль.ТС, импорт загрузочный модули (используя forRoot ()), а также объявить их в разделе экспорт (так они становятся доступными для других модулях).

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    CommonModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  exports: [BsDropdownModule, TooltipModule, ModalModule]
})
export class AppBootstrapModule {}

Наконец, не забудьте импортировать загрузочный модуль приложения.модуль.ТС.

импорт { AppBootstrapModule } с './приложение-загрузчик/приложение-загрузчик.модуль';

@NgModule({
  imports: [BrowserModule, AppBootstrapModule],
  // ...
})
export class AppModule {}

фабриката необходмо предусмотреть-загрузчик работает с Bootstrap 3 и 4. И я также сделал некоторые тесты и большинство функций и работы с Bootstrap 2.х (да, я все еще есть некоторые устаревшие код, чтобы сохранить).

Надеюсь, что это поможет кому-то!

Для загрузки 4.0.0-Альфа.6

npm install bootstrap@4.0.0-alpha.6 jquery tether --save

После этого запустите:

npm install

Сейчас. Открыть .угловые-Кинк.в JSON файл и импорт в Bootstrap, jQuery и троса:

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

И сейчас. Вы готовы пойти.

Выполните следующую команду в вашем проекте, т.е. npm install bootstrap@4.0.0-alpha.5 --save

После установки вышеуказанной зависимости выполните следующую команду npm, которая установит модуль bootstrap npm install --save @ng-bootstrap/ng-bootstrap.

Проверьте это для справки - https://github.com/ng-bootstrap/ng-bootstrap

Добавьте следующий импорт в app.module import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; и добавьте NgbModule к импорту

В вашем stye.css @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Как я вижу, вы уже получили много ответов, но вы можете попробовать этот метод .

Его лучше не использовать jQuery в угловой, я предпочитаю https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md способ установить загрузчик без использования компонентов начальной загрузки JS код, который зависит от jQuery.

npm install ngx-bootstrap bootstrap --save

or

ng add ngx-bootstrap   (Preferred)

Держите в jQuery код бесплатно в угловой

Шаг 1 : НПМ установить загрузчик-сохранить

Шаг 2 : Вставьте ниже код в угловое.в JSON папки node_modules/загрузки/дист/УСБ/бутстрапа.мин.УСБ

Шаг 3 : НГ служить

сначала установить загрузчик на свой проект с помощью npm НПМ я прихлоп после этого откройте стиль УР.CSS-файл в ваш проект и добавьте эту строку

мне, что@import &;~загрузочный/дист/УСБ/загрузки.Усс" по -;

и что's это ушко добавил в свой проект

Если вы хотите использовать Bootstrap в интернет и ваше приложение имеет доступ к интернету, вы можете добавить

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');

В ВЫ'основные R стиль.CSS-файл. и самый простой способ.

Ссылка : угловые.Ио

Примечание. Это решение загружает загрузчик с сайта unpkg и его нужно иметь доступ в интернет.

Для установки последней используйте $ НПМ я ... сохранить загрузочный@далее

Угловые 6 Кинк, просто делать:

НГ добавить @НГ-бутстрап/схемы

добавить в угловых-Кинк.в JSON

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

Это будет работать, я проверял.

|*| Установка ушко 4 для угловых 2, 4, 5, 6 + :

|+> установка загрузки с НПМ

npm install bootstrap --save

npm install popper.js --save

|+> добавить стили и скрипты на угловой.в JSON

"architect": [{
    ...
    "styles": [
        "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "src/styles.scss"
    ],
    "scripts": [
        "node_modules/jquery/dist/jquery.js",
        "node_modules/popper.js/dist/umd/popper.min.js",
        "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]
    ...
}]