Как использовать bootstrap 4 в angular 2?

Ответ 1

Чтобы использовать любую визуальную библиотеку, которая нуждается в JQuery, выполните следующие действия:

• Добавить библиотеку css в индекс;
• Добавить индекс jquery js для индекса;
• Добавить библиотеку js файлов в индекс;
• Установить файлы определения библиотеки (d.ts);
• Установить файлы определений jquery (d.ts);

Если библиотека не имеет файлов определений, вы можете:

• Создайте определение самостоятельно;
• Создать глобальную любую переменную с тем же именем объекта библиотеки, чтобы не получить ошибки компилятора;
• Использовать с ошибками (это худший вариант);

Теперь вы можете использовать библиотеку внутри Typescript;

Ответ 2

Bootstrap4 alpha для Angular2 CLI (также работает для модуля Angular4 CLI)

Если вы используете angular2 cli/angular 4 cli, выполните следующие действия:

npm i [email protected] --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";

Если вы используете scss, убедитесь, что вы изменили стиль по умолчанию на scss в .angular-cli.json:

  "defaults": {
    "styleExt": "scss",
    "component": {}
  }

Компоненты Bootstrap JS

Для работы компонентов JS Bootstrap вам все равно придется импортировать bootstrap.js в .angular-cli.json в разделе scripts (это должно произойти автоматически):

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

Обновление 2017/09/13: Boostrap 4 Beta теперь использует popper.js вместо tether.js. Поэтому в зависимости от того, какую версию вы используете, импортируйте в свои скрипты либо tether.js(alpha), либо popper.js(beta). Спасибо за головы @MinorThreat

Ответ 3

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

• Перейдите к Bootstrap 4 и получите команду npm

• Запустите команду NPM, полученную с шага 1 в вашем проекте i.e

  npm install [email protected] --save

• После установки вышеуказанной зависимости запустите следующую команду npm, которая установит модуль начальной загрузки npm install --save @ng-bootstrap/ng-bootstrap Вы можете прочитать об этом здесь

• Добавьте следующий импорт в app.module import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; и добавьте NgbModule в imports

• Ваш модуль приложения будет выглядеть следующим образом:

  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  
  @NgModule({
     declarations: [
     AppComponent,
     WeatherComponent
  ],
    imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    NgbModule.forRoot(), // Add Bootstrap module here.
  ],
    providers: [],
    bootstrap: [AppComponent]
  })
  
  export class AppModule { }
  

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

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

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

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

  или если вы хотите использовать оповещение ng, поместите следующее на app.component.html page

  <ngb-alert [dismissible]="true">I'm a dismissible alert :) </ngb-alert>
  

• Теперь запустите проект, и вы увидите сообщение с бутстрапом в браузере.

ПРИМЕЧАНИЕ. Подробнее о ng Компоненты здесь

Ответ 4

Я бы предложил:

• Просто добавьте ссылку на файл Bootstrap CSS на странице index.html
• Использование ng-bootstrap - выделенный набор Angular 2 директив для частей, в которых требуется динамическое поведение. Таким образом, вам не нужно импортировать/настраивать jQuery и не заботиться о JavaScript Bootstrap.

Ответ 5

Сначала перейдите в каталог проекта и выполните следующие шаги.

1) npm install --save @ng-bootstrap/ng-bootstrap (запустите эту команду в командной строке node js)

2) npm install [email protected] (затем запустите это)

3) import {NgbModule} from '@ng-bootstrap/ng-bootstrap' (напишите это в app module.ts)

4) Если модуль является вашим корневым модулем, включите этот

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

    (or)

Если не root Module

`@NgModule({
 declarations: [OtherComponent, ...],
 imports: [NgbModule, ...]
})`

5) Запишите это в system.config.js

`map: {
'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-
bootstrap/bundles/ng-bootstrap.js',
}`

6) Добавьте в Index.html

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

Ответ 6

Вы можете использовать npm для установки последней версии начальной загрузки. Это можно сделать с помощью команды:

npm install [email protected]

И после этого вам, возможно, придется импортировать bootstrap.css в ваш основной файл css. Какими будут styles.css, если вы используете angular -cli.

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

Если вы хотите узнать больше, воспользуйтесь ссылкой: http://technobytz.com/install-bootstrap-4-using-npm.html