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

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

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

npm install bootstrap@next

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

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

наконец, добавьте css Bootstrap в приложения[0].стили массив:

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

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

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

сделать следующее:

npm i bootstrap@next --save

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

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

для стиля.в CSS

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

для стиля.scss

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

для скриптов вам все равно придется добавить файл в angular-cli.файл json так (в угловой версии 6 это редактирование должно быть сделано в файле угловое.в JSON):

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

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

npm i -S tether
npm i -S jquery
npm i -S bootstrap@4.0.0-alpha.4 

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

  "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-бета.26

вы можете увидеть на doc для нового способа импорта bootstrap здесь

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

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

в свой индекс.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.ТС :

/** 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 team) историю о том, как включить Bootstrap:https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

включить загрузки

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

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

Начало Работы

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

ng new my-app
cd my-app

Установка Bootstrap

С новым проектом, созданным и готовым, вам нужно будет установить bootstrap в свой проект в качестве зависимости. С помощью --save опция зависимость будет сохранена в пакете.в 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. Проверьте кнопку в стиле bootstrap кажется.

использование 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. Убедитесь, что появляется кнопка в стиле bootstrap. Чтобы убедиться, что ваши переменные используются open _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.модуль.TS и добавить

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

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

открыть угловой-cli.JSON и вставить новая запись в массив стилей

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

открыть src / app / app.деталь.html и проверить все работы, добавив

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

поскольку это стало настолько запутанным, и ответы здесь полностью смешаны, я просто предложу пойти с официальный ui-team для BS4 repo (да, есть так много этих репозиториев для 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';

единственная оставшаяся часть в список импортируемых модулей в модуль приложения. Точный метод будет немного отличаться для корневого (верхнего уровня) модуля, для которого вы должны получить код, подобный (notice 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 {
}

это, кажется, наиболее последовательное поведение на сегодняшний день

шаги для начальной загрузки 4 в Angular 5

1. Создать Угловой 5 Проект

   НГ новый AngularBootstrapTest

2. переместить в папку проекта

   cd AngularBootstrapTest

3. скачать bootstrap

   npm установить bootstrap

4. добавить Bootstrap в Проект

   4.1 открытым .угловой-cli.в JSON

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

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

   .

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

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

проверить загрузчик

1. открыть src/app/app.component.html
2. добавить кнопку загрузки компонент

.

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

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

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

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

   ng служить --открыть

теперь вы увидите кнопку bootstrap style на странице

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

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

1. npm install --save bootstrap

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

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

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

наслаждайтесь

1. установить bootstrap

    npm install bootstrap@next
   

2.Добавить код .угловой-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"
      ],

1. последнее добавление bootstrap.CSS для вашего стиля кода.scss

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

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

попробуй такое

npm install bootstrap@next

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

вы также можете посмотреть это видео Майка Брокки, в котором есть полезная информация о том, как добавить bootstrap в ваш проект, созданный 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" ],

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

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

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

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

• Inculde bootstrap.min.css в свой .угловой-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.

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

npm install --save bootstrap

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

изменить на

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

все сделали.

angular-cli теперь имеет выделенный страница wiki где вы можете найти все, что вам нужно. Прям, установить bootstrap via npm и добавьте ссылку стили в раздел "стили" в вашем

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

1.установить bootstrap

npm установить bootstrap tether jquery --save

2.добавить.угловой-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",

добавить такой путь | импорт boostrap в стиле.CSS или стиль.scss

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

вот именно.

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

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

1. на в src/стили.в CSS, импорт стиля bootstrap

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

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

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

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

дополнительная информация о bootstrap-schematics пожалуйста, найдите здесь.

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

   npm install bootstrap
   

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

npm install --save popper.js

3.Гото!--12-->угловое.в JSON в проекте Angular 6/.угловой-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"
        ]

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

npm install --save @bootsrap@4

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

+ bootstrap@4.1.3
updated 1 package in 8.245s

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

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

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

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