Мы хотим использовать загрузчик 4 (4.0.0-alpha.2) в нашем приложении, созданном с помощью angular-cli 1.0.0-beta.5 (с узлом v6.1.0).

После получения начальной загрузки и ее зависимостей с помощью npm наш первый подход заключался в добавлении их в angular-cli-build.js:

'bootstrap/dist/**/*.min.+(js|css)',  
'jquery/dist/jquery.min.+(js|map)',  
'tether/dist/**/*.min.+(js|css)',

и импортировать их в нашем index.html

<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

Это работало нормально, ng serveно как только мы произвели сборку с -prodфлагом, все эти зависимости исчезли dist/vendor(сюрприз!).

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

У нас были следующие мысли, но мы не знаем, куда идти ...

• использовать CDN? но мы бы предпочли предоставить эти файлы, чтобы гарантировать, что они будут доступны

• копировать зависимости в dist/vendorпосле нашего ng build -prod? Но это похоже на то, что angular-cli должен обеспечить, поскольку он «заботится» о сборочной части?

• добавить jquery, bootstrap и tether src/system-config.tsи каким-то образом вытянуть их в наш пакет main.ts? Но это казалось неправильным, учитывая, что мы не собираемся явно использовать их в коде нашего приложения (в отличие от moment.js или чего-то вроде lodash, например).

ВАЖНОЕ ОБНОВЛЕНИЕ: теперь ng2-bootstrap заменен на ngx-bootstrap

ngx-bootstrap поддерживает Angular 3 и 4.

Обновление: 1.0.0-beta.11-webpack или выше версии

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

ng -v

Если угловой кли версия больше , чем 1.0.0-beta.11-WebPack , то вы должны выполнить следующие шаги:

1. Установите ngx-bootstrap и bootstrap :

   npm install ngx-bootstrap bootstrap --save

Эта строка устанавливает Bootstrap 3 в настоящее время, но может установить Bootstrap 4 в будущем. Имейте в виду, что ngx-bootstrap поддерживает обе версии.

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

   import { AlertModule } from 'ngx-bootstrap';
   ...
   @NgModule({
   ...
   imports: [AlertModule.forRoot(), ... ],
   ... 
   })
   

3. Откройте angular-cli.json (для angular6 и более поздних версий имя файла изменилось на angular.json ) и вставьте новую запись в stylesмассив:

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

4. Откройте src / app / app.component.html и добавьте:

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

1.0.0-бета.10 или ниже:

И, если ваш угловой кли версия 1.0.0-beta.10 или ниже, то вы можете использовать следующие шаги.

Сначала перейдите в каталог проекта и введите:

npm install ngx-bootstrap --save

Затем откройте ваш angular-cli-build.js и добавьте эту строку:

vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

Теперь откройте ваш src / system-config.ts и напишите:

const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

...и:

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};

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

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

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

npm install bootstrap@next

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

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

Наконец, добавьте Bootstrap CSS в массив apps [0] .styles:

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

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

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

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

npm i bootstrap@next --save

Это добавит загрузчик 4 в ваш проект.

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

Для 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 следующим образом ( в версии Angular 6 это редактирование необходимо выполнить в файле angular.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)

  "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 вам просто нужна ссылка для начальной загрузки 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

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

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

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>

Шаги для Bootstrap 4 в угловых 5

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

   нг новый AngularBootstrapTest

2. Переместить в каталог проекта

   cd AngularBootstrapTest

3. Скачать загрузчик

   npm установить загрузчик

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 , вы должны остановить и повторно запустить ng serve, чтобы отразить изменения

Так как это стало настолько запутанным, и ответы здесь полностью смешаны, я просто предлагаю пойти с официальной командой ui для репозитория 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 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. Перезагрузите ваш локальный сервер

Выполните следующие шаги:

1. npm install --save bootstrap

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

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

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

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

1. Установите Bootstrap, используя npm

   npm install bootstrap

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

npm install --save popper.js

3.Goto 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"
        ]

Попробуй это

npm install bootstrap@next

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

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

1. Беги в баш 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 --save bootstrap

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

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

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

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

Все сделано.

Теперь с новой версией 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.

• Inculde 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. Установите загрузчик, popper.js

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

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

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

Шаг 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», в которой вы сможете увидеть загрузчик и jquery.

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

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

1. установить загрузчик

npm установить загрузчик

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

добавить этот путь | импорт 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

Это оно.

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

npm install --save @bootsrap@4

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

+ bootstrap@4.1.3
updated 1 package in 8.245s

Это означает, что boostrap 4 успешно установлен. Однако, чтобы использовать его, вам необходимо обновить массив «styles» в файле 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.

Не видел этого здесь:

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

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

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

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 bootstrap@4.4и т. Д.

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

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

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

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

Запустите эту команду

npm install bootstrap@3

ваш Angular.json

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

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

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

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

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

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

Работает для CSS и SCSS. Bootstrap v3 и v4 доступны.

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