Ми хочемо використовувати bootstrap 4 (4.0.0-alpha.2) у нашому додатку, згенерованого за допомогою angular-cli 1.0.0-beta.5 (w / node 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? Але це здається, що щось має бути кутовим затискачем, оскільки воно "піклується" про частину складання?

• додаючи jquery, bootstrap і tether in 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

Якщо ваша версія angular -cli перевищує 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-beta.10 або нижче:

І якщо ваша версія angular -cli є 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

Потім додайте потрібні файли сценаріїв до програм [0] .scripts у файлі angular-cli.json:

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

Нарешті додайте CSS Bootstrap до додатків [0]. Масив стилів:

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

Перезапустіть службу, якщо ви її запустите, і 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 так ( У кутовій версії 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

Завантажувач - популярний фреймворк 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>

Сходи для завантажувальної програми 4 в кутовій 5

1. Створіть проект Angular 5

   новий AngularBootstrapTest

2. Перехід до каталогу проектів

   cd AngularBootstrapTest

3. Завантажити завантажувальний інструмент

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

4. Додати завантажувальний засіб до проекту

   4.1 відкрити .angular-cli.json

   4.2 знайдіть розділ «стилі» в json

   4.3 додайте css шлях до завантажувальної програми, як показано нижче

   .

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

Тепер ви успішно додали css bootstrap у кутовий проект 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 - відкрити

Тепер ви побачите кнопку стилю завантажувальної сторінки на сторінці

Примітка: якщо ви додали шлях до завантажувальної служби після обслуговування , ви повинні зупинити та повторно запустити службу для відображення змін

Оскільки це стало настільки заплутаним, і відповіді тут абсолютно неоднозначні, я просто пропоную перейти з офіційною командою інтерфейсів для репортажу BS4 (так, таких репостів для NG-Bootstrap дуже багато.

Просто дотримуйтесь інструкцій тут https://github.com/ng-bootstrap/ng-bootstrap, щоб отримати BS4.

Цитуючи з lib:

Ця бібліотека будується з нуля командою 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.Запустіть 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.

• Включіть bootstrap.min.cssу свій .angular-cli.json розділ стилів.

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

• Встановіть ng-завантажувальну залежність.

  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';

Крок 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та додайте посилання стилів до розділу "стилі" у вашому .angular-cli.jsonфайлі

Робочий приклад у разі використання angular-cli та css:

1.встановити завантажувальну систему

npm встановити 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

Це воно.

Виконайте наступну команду всередині проекту

npm install --save @bootsrap@4

і якщо ви отримаєте таке підтвердження

+ bootstrap@4.1.3
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.

Тут не бачили цього:

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

Я щойно додав цей рядок у style.scss У моєму випадку я також хотів змінити змінні bootstrap.

Якщо ви тільки що почали з кутового та завантажувального інструменту, то просто відповідь буде нижче кроків: 1. Додайте пакет вузлів завантажувальної програми як залежність від розробника

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 вашого кутового проекту з а та тегами,

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

• Додавання файлів CSS та JavaScript Bootstrap у масиви стилів та сценаріїв файлу 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файл.

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

Робочий приклад у разі використання кутового кліпу:

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

Працює для css та scss. Доступні Bootstrap v3 та v4.

Більше інформації про завантажувальну схему можна знайти тут .