Поиск ключевого словa > Установка глобальной библиотеки на https://github.com/angular/angular-cli поможет найти ответ.

В соответствии с их документом вы можете сделать следующие шаги, чтобы добавить библиотеку Bootstrap.

Сначала установите Bootstrap из npm:

npm install bootstrap@next

Затем добавьте необходимые файлы script в приложения [0].scripts в файле angular -cli.json:

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

Наконец добавьте Bootstrap CSS в приложение [0].styles array:

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

Перезапустите ng-службу, если вы ее запустите, и Bootstrap 4 должен работать над вашим приложением.

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

Выполните следующие действия:

npm i bootstrap@next --save

Это добавит bootstrap 4 в ваш проект.

Затем перейдите к файлу src/style.scss или src/style.css (выберите то, что вы используете) и импортируйте bootstrap там:

Для style.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Для style.scss

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

Для скриптов вам все равно придется добавить файл в файл angular -cli.json, например:

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

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

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

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

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

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

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

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

версии 1.0.0 или ниже:

В вашем файле index.html вам просто нужна ссылка bootstrap css (без скриптов js 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

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

Так как никто не упоминал официальную (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

Когда новый проект будет создан и готов, вам потребуется установить 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;

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

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

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.

Цитата из lib:

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

Как и в случае с 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 {
}

Это, по-видимому, наиболее устойчивое поведение

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

npm install bootstrap@next

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

1, установите bootstrap

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, перезапустите локальный сервер

• Запуск в bash npm install ng2-bootstrap bootstrap --save
• Добавить/изменить следующее в 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" ],

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

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

npm install boostrap@next --save

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

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

добавить этот путь | import boostrap в стиле style.css или style.scss

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

что он.

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

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

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

выполните следующие шаги, когда вы интегрируете bootstrap с сгенерированным проектом с последней версией angular -cli.

• Inculde bootstrap.min.css в разделе .angular-cli.json, styles.

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

Выполните следующие действия:

• nmp install --save bootstrap

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

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

Enjoy

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

1.install bootstrap

npm установка загрузочного троса jquery --save

2.add to.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"
  ],

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

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

npm install --save bootstrap

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

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

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

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

Все сделано.