Сначала вам нужно установить tether, jquery и bootstrap с помощью этих команд

npm i -S tether
npm i -S jquery
npm i -S [email protected] 

После добавления этих строк в файл angular-cli.json (angular.json, начиная с версии 6 и далее)

  "styles": [
    "styles.scss",
    "../node_modules/bootstrap/scss/bootstrap-flex.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

Поскольку никто еще не упоминал официальную историю (команда angular-cli) о том, как включить Bootstrap: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Включите Bootstrap

Bootstrap - это популярный фреймворк CSS, который можно использовать в проекте Angular. Это руководство проведет вас через добавление начальной загрузки в проект Angular CLI и ее настройку для использования начальной загрузки.

Использование CSS

Начиная

Создайте новый проект и перейдите в проект

ng new my-app
cd my-app

Установка Bootstrap

После того, как новый проект создан и готов, вам нужно будет установить начальную загрузку для вашего проекта в качестве зависимости. Используя параметр --save, зависимость будет сохранена в package.json.

# version 3.x
npm install bootstrap --save

# version 4.x
npm install bootstrap@next --save

Настройка проекта

Теперь, когда проект настроен, его необходимо настроить для включения загрузочного CSS.

• Откройте файл .angular-cli.json из корня вашего проекта.
• Под свойством apps первый элемент в этом массиве является приложением по умолчанию.
• Существует свойство styles, которое позволяет применять к вашему приложению внешние глобальные стили.
• Укажите путь к bootstrap.min.css

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

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

Примечание. Когда вы вносите изменения в .angular-cli.json, вам нужно будет перезапустить ng serve, чтобы принять изменения конфигурации.

Тестовый проект

Откройте app.component.html и добавьте следующую разметку:

<button class="btn btn-primary">Test Button</button>

Настроив приложение, запустите ng serve, чтобы запустить приложение в режиме разработки. В браузере перейдите к приложению localhost:4200. Убедитесь, что отображается кнопка в стиле начальной загрузки.

Использование SASS

Начиная

Создайте новый проект и перейдите в проект

ng new my-app --style=scss
cd my-app

Установка Bootstrap

# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save

Настройка проекта

Создайте пустой файл _variables.scss в src/.

Если вы используете bootstrap-sass, добавьте в _variables.scss следующее:

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

В styles.scss добавить следующее:

// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

Тестовый проект

Откройте app.component.html и добавьте следующую разметку:

<button class="btn btn-primary">Test Button</button>

Настроив приложение, запустите ng serve, чтобы запустить приложение в режиме разработки. В браузере перейдите к приложению localhost:4200. Убедитесь, что отображается кнопка в стиле начальной загрузки. Чтобы убедиться, что ваши переменные используются, откройте _variables.scss и добавьте следующее:

$brand-primary: red;

Вернитесь в браузер, чтобы увидеть, как изменился цвет шрифта.

Обновление v1.0.0-beta.26

Вы можете увидеть в документации новый способ импорта начальной загрузки здесь

Если по-прежнему не работает, перезапустите команду ng serve.

1.0.0 или более ранние версии:

В вашем файле index.html вам просто нужна ссылка bootstrap css (скрипты js не нужны)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

А также

npm install ng2-bootstrap --save
npm install moment --save

После установки ng2-bootstrap в my_project / src / system-config.ts :

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages: any = {
  'ng2-bootstrap': {
    defaultExtension: 'js'
  },
  'moment':{
     format: 'cjs'
  }
};

И в my_project / angular-cli-build.js:

module.exports = function (defaults) {
return new Angular2App(defaults, {
    vendorNpmFiles: [
        'ng2-bootstrap/**/*',
        'moment/moment.js'
    ]
});
};

Не забудьте эту команду, чтобы добавить модуль к поставщику:

ng build

для импорта из другого модуля действует тот же принцип.

Шаги для Bootstrap 4 в Angular 5

1. Создать проект Angular 5

   ng новый AngularBootstrapTest

2. Перейти в каталог проекта

   cd AngularBootstrapTest

3. Скачать bootstrap

   npm install bootstrap

4. Добавить Bootstrap в проект

   4.1 открытый .angular-cli.json

   4.2 найдите раздел "стили" в json

   4.3 добавьте путь начальной загрузки css, как показано ниже

   .

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

Теперь вы успешно добавили загрузочный css в проект angular 5.

Тестовая загрузка

5. открыть src/app/app.component.html
6. добавить компонент кнопки начальной загрузки

.

<button type="button" class="btn btn-primary">Primary</button>

вы можете сослаться на стили кнопок здесь (https://getbootstrap.com/docs/4.0/components/buttons/)

7. сохраните файл

8. запустить проект

   ng serve --open

Теперь вы увидите кнопку стиля начальной загрузки на странице

Примечание: если вы добавили путь начальной загрузки после ng serve, вы должны остановить и повторно запустить ng serve, чтобы отразить изменения.

1. Установить бутстрап

   npm install bootstrap@next
   

2. Добавьте код в .angular-cli.json:

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

3. Последний раз добавьте bootstrap.css в свой код style.scss

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

4. Перезагрузите локальный сервер

Я предполагаю, что вышеупомянутые методы изменились после выпуска, проверьте эту ссылку

https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md

начать проект

npm i -g angular-cli
ng new my-app
cd my-app
ng serve
npm install --save @ng-bootstrap/ng-bootstrap

установить ng-bootstrap и bootstrap

npm install ng2-bootstrap bootstrap --save

откройте src / app / app.module.ts и добавьте

import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
   ...
   imports: [AlertModule, ... ],
    ... 
})

откройте angular-cli.json и вставьте новую запись в массив стилей

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

откройте src / app / app.component.html и проверьте все, что работает, добавив

<alert type="success">hello</alert>

Поскольку это стало настолько запутанным, и ответы здесь полностью неоднозначны, я просто предлагаю использовать репозиторий официального ui-team для BS4 (да, таких репозиториев для NG-Bootstrap очень много.

Просто следуйте инструкциям здесь https://github.com/ng-bootstrap/ng-bootstrap получить BS4.

Цитата из библиотеки:

Эта библиотека создается с нуля командой ui-bootstrap. Мы используем TypeScript и ориентируемся на CSS-фреймворк Bootstrap 4.

Как и в случае с Bootstrap 4, эта библиотека находится в стадии разработки. Пожалуйста, ознакомьтесь с нашим списком проблем, чтобы увидеть все, что мы реализуем. Не стесняйтесь комментировать там.

Просто скопируйте вставку того, что там есть:

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

После установки вам необходимо импортировать наш основной модуль:

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

Остается только указать импортированный модуль в вашем модуле приложения. Точный метод будет немного отличаться для корневого (верхнего уровня) модуля, для которого вы должны получить код, аналогичный (обратите внимание на NgbModule.forRoot ()):

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

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Другие модули в вашем приложении могут просто импортировать NgbModule:

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

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...], 
})
export class OtherModule {
}

Это кажется наиболее последовательным поведением на сегодняшний день.

Сделайте следующие шаги:

1. npm install --save bootstrap

2. И в вашем .angular-cli.json добавьте в раздел стилей:

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

После этого вы должны перезапустить свою службу ng.

Наслаждаться

1. Установите Bootstrap с помощью npm

   npm install bootstrap
   

2. Установите Popper.js

npm install --save popper.js

3. Найдите angular.json в проекте Angular 6 / .angular-cli.json в Angular 5 и добавьте перечисленное:

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

        "scripts": [
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

2 простых шага

1. Установите Bootstrap (устанавливаю последнюю версию)

npm install bootstrap@next

2. Импортируйте в свой проект, добавьте строку ниже в свой styles.scss

@import '~bootstrap';

Обратите внимание, что ваш порядок импорта может иметь значение, если у вас есть другие библиотеки, которые используют загрузку, пожалуйста, держите этот оператор импорта вверху

Конец. :)

ПРИМЕЧАНИЕ: ниже мои версии

угловой: 9

узел: v10.16.0

npm: 6.9.1

Выполнить эту команду

npm install bootstrap@3

ваш Angular.json

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

Откройте терминал / командную строку в соответствующем каталоге проекта и введите следующую команду.

npm install --save bootstrap

Затем откройте файл .angular-cli.json, найдите

"styles": [ "styles.css" ],

измените это на

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

Все сделано.

Вы также можете посмотреть это видео Майка Брокки, в котором есть полезная информация о том, как добавить начальную загрузку в ваш проект, созданный с помощью Angular-Cli. https://www.youtube.com/watch?v=obbdFFbjLIU (примерно минут 13 : 00)

1. Запустить в bash npm install ng2-bootstrap bootstrap --save
2. Добавить / изменить следующее в angular-cli.json
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],

Попробуй это

npm install bootstrap@next

https://github.com/angular/angular-cli#global-library-installation

Теперь с новой версией ng-bootstrap 1.0.0-beta.5 поддерживает большинство собственных директив Angular, основанных на разметке Bootstrap и CSS.

Единственная зависимость, необходимая для работы с этим, - bootstrap. Нет необходимости использовать зависимости jquery и popper.js.

ng-bootstrap полностью заменяет реализацию JavaScript для компонентов. Таким образом, вам не нужно включать bootstrap.min.js в раздел скриптов в вашем .angular-cli.json.

выполните следующие действия при интеграции начальной загрузки со сгенерированным проектом с последней версией angular-cli.

• Включите bootstrap.min.css в свой .angular-cli.json, раздел стилей.

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

• Установите зависимость ng-bootstrap.

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

• Добавьте это в свой основной класс модуля.

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

• Включите следующее в раздел импорта основного модуля.

  @NgModule({
     imports: [NgbModule.forRoot(), ...],
  })
  

• Если вы собираетесь использовать компоненты ng-bootstrap внутри этих классов модулей, сделайте следующее в своих подмодулях.

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

• Теперь ваш проект готов использовать доступные компоненты ng-bootstrap.

1. Установите bootstrap, popper.js

npm install --save bootstrap npm install --save popper.js

3. В src / styles.css импортируйте стиль начальной загрузки

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

Выполните следующую команду внутри проекта

npm install --save @bootsrap@4

и если вы получите такое подтверждение

+ [email protected]
updated 1 package in 8.245s

Это означает, что boostrap 4 успешно установлен. Однако, чтобы использовать его, вам необходимо обновить массив "стилей" в файле angular.json.

Обновите его следующим образом, чтобы бутстрап мог переопределить существующие стили.

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

Чтобы убедиться, что все настроено правильно, запустите ng serve > open browser at http://localhost:4200/ or a port you run the angular app > right click > inspect > under the head check the styles if you have bootsrap like shown below, затем можно использовать boostrap.

Шаг 1:
npm install bootstrap@latest --save-dev Будет установлена ​​последняя версия программы начальной загрузки. Однако указанную версию можно установить, добавив номер версии.

Шаг 2. Откройте файл styles.css и добавьте следующий @import "~bootstrap/dist/css/bootstrap.css"

Для добавления Bootstrap и JQuery

npm install bootstrap@3 jquery --save

после выполнения этой команды, пожалуйста, проверьте свою папку node_modules, вы должны увидеть, что в нее добавлены bootstrap и jquery.

Если вы только начали работать с angular и bootstrap, тогда простой ответ будет следующим: 1. Добавьте узел узла bootstrap в качестве зависимости разработчика.

npm install --save bootstrap

2. импортировать таблицу стилей начальной загрузки в файл angular.json.

   "styles": [ "projects/my-app/src/styles.scss", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],

3. и вы готовы использовать бутстрап для стилизации, сетки и т. д.

   <div class="container">My first bootstrap div</div>

Лучшее из того, что я обнаружил, - это то, что мы управляем с помощью начальной загрузки без какой-либо зависимости от сторонних модулей. Мы можем обновить начальную загрузку в любое время, просто обновив команду npm install --save [email protected] и т. Д.

Я вижу, что многие решения больше не работают с новыми версиями Angular-CLI.

Вы можете попробовать добавить следующий тег ссылки вверху и теги скрипта внизу в свой app.component.html.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

Но если вы хотите использовать ngx-bootstrap, выполните следующую команду в каталоге вашего проекта

ng add ngx-bootstrap

Протестируйте это следующим образом в качестве содержимого вашего app.component.html

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

для бутстрапа 4.5, угловой 10

npm install bootstrap --save

обновите свой файл styles.scss таким образом с помощью оператора импорта начальной загрузки.

 $theme-colors: (
    "primary":    #b867c6,
    "secondary":  #f3e5f5,
    "success":    #388e3c,
    "info":       #00acc1,
    "light":      #f3e5f5,
    "dark":       #863895
);

@import "~bootstrap";

@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

body {
    color: gray('800');
    background-color: theme-color('light');
    font-family: 'Raleway', sans-serif;
}

импорт начальной загрузки должен производиться после перезаписи вашей переменной. [в этом примере также показано, как можно использовать собственные цвета темы.]

angular-cli теперь имеет специальную страницу вики, где вы можете найти все тебе нужно. TL; DR, установите bootstrap через npm и добавьте ссылку стилей в раздел "стили" в вашем .angular-cli.json файле.

Рабочий пример при использовании angular-cli и css:

1. установить бутстрап

npm install bootstrap tether jquery --save

2. добавить в .angular-cli.json

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

установить boostrap с помощью npm

npm install boostrap@next --save

затем проверьте папку node_modules на наличие файла boostrap.css (в dist), обычно путь

"../node_modules/bootstrap/dist/css/bootstrap.css",

добавить этот путь | импортировать ускорение в style.css или style.scss

@import "../node_modules/bootstrap/dist/css/bootstrap.css";  //bootstrap
@import "~@angular/material/prebuilt-themes/indigo-pink.css // angular material theme

это оно.

Не видел вот этого:

@import 'bootstrap/scss/bootstrap.scss';

Я просто добавил эту строку в style.scss. В моем случае я также хотел переопределить переменные начальной загрузки.

У вас есть много способов добавить Bootstrap 4 в свой проект Angular:

• Включение файлов Bootstrap CSS и JavaScript в раздел файла index.html вашего проекта Angular с тегами и,

• Импорт файла CSS Bootstrap в глобальный файл styles.css вашего проекта Angular с ключевым словом @import.

• Добавление файлов Bootstrap CSS и JavaScript в массивы стилей и скриптов файла angular.json вашего проекта

вы можете установить начальную загрузку в angular с помощью команды npm install bootstrap.

и следующий путь начальной загрузки в angular.json файле и style.css файле.

вы можете прочитать полный блог о том, как установить и настроить bootstrap в angular, нажмите здесь, чтобы прочитать об этом блог полностью

Обновлено август-2020: Angular 10

Если у вас есть проект CLI для Angular ≥ 9, вы можете просто использовать наши схемы, чтобы добавить к нему библиотеку ng-bootstrap. Просто запустите следующую команду в папке вашего проекта. Все конфигурации будут добавлены автоматически.

ng add @ng-bootstrap/ng-bootstrap

ng s

Примеры фрагментов:

import {Component} from '@angular/core';

@Component({selector: 'ngbd-alert-basic', templateUrl: './alert-basic.html'})
export class NgbdAlertBasic {
}

<p>
  <ngb-alert [dismissible]="false">
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
  </ngb-alert>
</p>

Рабочий пример в случае использования angular-cli:

npm i bootstrap-schematics
ng generate bootstrap-shell -c bootstrap-schematics -v 4
npm install

Работает для css и scss. Доступны версии Bootstrap v3 и v4.

Дополнительную информацию о схемах начальной загрузки можно найти здесь.

Установите начальную загрузку с помощью npm i --save bootstrap@version. Теперь перейдите в папку nodemodules и из папки начальной загрузки скопируйте путь к 'bootstrap.min.css.js' и вставьте полный путь (например, nodemodules/bootstrap/css/bootstrap.min.css.js) в angular.json под файлом тега сценария и повторно запустите сервер и чтобы проверить, успешна ли установка, запустите программу в любом браузере, который вам нравится, и нажмите F12, вы обнаружите, что часть окна открывается, теперь перейдите на вкладку элементов, откройте тег заголовка, и если вы видите bootstrap в теге стиля, то ваша установка успешно.

Неважно, какой JS-фреймворк вы используете, импортировать начальную загрузку в ваш проект легко, выполнив 2 шага ниже:

Установите бутстрап, используя npm i -S bootstrap или yarn add bootstrap.

В styles.css или styles.scss импортируйте начальную загрузку как @import '~bootstrap/dist/css/bootstrap.min.css'.

Просто добавьте эти три строки в тег Head в index.html.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Добавьте это в свой файл styles.css

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

Хорошие новости! По сути, Bootstrap 5 теперь можно легко реализовать, и вам даже не нужен jQuery.
Просто запустите на своем терминале

npm install bootstrap@next --save

Итак, Angular использует веб-пакет, поэтому в вашем app.module.ts просто добавьте:

import "bootstrap";

Или, если вы хотите импортировать их отдельно, сделайте это так:

import { ModuleToBeImported } from 'bootstrap';

Затем в свой файл styles.scss добавьте:

@import '~bootstrap/scss/bootstrap';

В основном это все, НО имейте в виду, что для некоторых компонентов требуется popper.js. Компоненты, требующие js начальной загрузки. Здесь вы увидите компоненты, зависящие от popper.js, которые на момент написания были раскрывающимися списками для отображения и позиционирования, а также всплывающими подсказками и всплывающими окнами для отображения и позиционирования.

Поэтому, чтобы установить popper.js, просто запустите:

npm install @popperjs/core

Справочник