Как добавить bootstrap в проект angular-cli

Мы хотим использовать загрузчик 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 ? Но это похоже на то, что angular-cli должен обеспечить, поскольку он «заботится» о сборочной части?

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

 Mohammad Faisal08 февр. 2018 г., 07:56
 Liam15 февр. 2019 г., 10:48
Просто используйте ng-bootstrapng-bootstrap.github.io/#/home
 Christoph30 окт. 2017 г., 06:16
Многие из ответов ниже рекомендуют использовать ngx-bootstrap. Я обнаружил, что это не полная замена для jquery-плагинов Bootstrap, и иногда вам все еще нужно использовать эти «родные» jquery-плагины, такие как функциональность свертывания в таблицах. В этом случае найдите один из ответов ниже, который объясняет, как явно импортировать скрипт jquery из файла .angular-cli.json.
 mjwrazor17 июл. 2016 г., 02:31
У вас есть они в вашем файле system-config.ts? Вы должны сопоставить их.

Ответы на вопрос(27)

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

npm i [email protected] --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"
],
 moshiuramit12 сент. 2018 г., 19:58
Что делать, если вы хотите использовать bootstrap 3?
 mahatmanich17 нояб. 2016 г., 11:48
Да, это чище и более модульно, поэтому я предпочитаю это!
 A.I24 сент. 2017 г., 18:28
более чистый метод будет @import '~ bootstrap / dist / css / bootstrap'; Использование знака ~ для импорта как модуля непосредственно из папки node_modules. Нашел объяснение здесь:stackoverflow.com/questions/39535760/...
 racar02 окт. 2018 г., 01:02
Лучше всего подходит для последних версий угловых
 martin17 нояб. 2016 г., 09:43
ИМХО это тоже отличный вариант, особенно с последними версиями angular-cli. Большим преимуществом является то, что этот метод не зависит от людей, которые обновляют библиотеку из пакета npm, упомянутого в принятом ответе; Более того, это также позволяет нам переопределять переменные начальной загрузки с использованием SASS, не указывая напрямую на скомпилированные CSS-файлы.
 arn-arn01 авг. 2017 г., 19:32
Благодарю. это сработало.
 mahatmanich25 нояб. 2016 г., 08:52
Это с помощью настройки Cli!
 har_shit25 нояб. 2016 г., 05:52
Этот doent работает для меня, любые предварительные условия, которым я должен следовать, я использую последнюю версию angular и bootstrap и добавил все вышеупомянутые изменения, не работал таким образом, но работал над добавлением <link rel = "stylesheet" type = "text / css" href = "vendor / bootstrap / dist / css / bootstrap.min.css"> в index.html
 Pini Cheyni14 июн. 2017 г., 10:59
Только этот работал для меня, я думаю, что этот процесс должен быть более простым, используя Angular-Cli
 Sak12 сент. 2017 г., 14:32
для style.scss мне пришлось добавить это: @import "../node_modules/bootstrap/dist/css/bootstrap.css";

https://github.com/angular/angular-cli поможет вам найти ответ.

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

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

npm install [email protected]

Затем добавьте необходимые файлы сценариев в 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 должен работать в вашем приложении.

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

 Dejazmach18 дек. 2017 г., 18:08
Вам лучше использовать bootstrap.bundle.js в объявлении скриптов, в котором также есть popper.js.
 Praveen M P12 мар. 2018 г., 09:25
Добавление минимизированной версии будет уместным "../node_modules/bootstrap/dist/css/bootstrap.min.css"
 Howard Swope16 мар. 2017 г., 02:03
Если вы хотите использовать загрузочный javascript, а не только .css, вам также необходимо включить его зависимости в массив scripts: "../node_modules/jquery/dist/jquery.slim.js", "../ node_modules / tether / dist / js / tether.js "," ../node/modules/bootstrap/dist/js/bootstrap.js "
 stom13 февр. 2018 г., 10:18
Чтобы сделать работу, не пропуститепоследний пункт выполнятьng serve снова. Кроме того, почему Angular CLI не может добавить это автоматически? Было бы хорошо, если бы у нас был выбор для этого.
 Pascal12 нояб. 2016 г., 11:34
Bootstrap.js, безусловно, не нужен! Поскольку вы не хотите использовать juqery bootstrap.js для этого, вы должны установить директивы ng2 bootstrap.
 freethebees01 нояб. 2016 г., 16:30
Как я печатаю, это единственное решение, которое, похоже, использует последнюю версию angular-cli.

Обновление 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-самозагрузка в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

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

 mjwrazor17 июл. 2016 г., 04:18
как это позволяет загрузчику использовать jquery? Я сделал это, и это не работает.
 mjwrazor17 июл. 2016 г., 04:45
пример наконец-то нашел это и все заработало. Я не мог понять это какое-то время.

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

 npm install [email protected]

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

Последнее добавление bootstrap.css в ваш код style.scss

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

Перезагрузите ваш локальный сервер

 Christoph30 окт. 2017 г., 06:12
Хотя ngx-bootstrap хорош для компонентов, которые он поддерживает, иногда вам все равно нужно использовать «нативные» плагины jquery, такие как функциональность свертывания в таблицах. Затем вам все еще нужно явно импортировать скрипт jquery, который показывает этот ответ.

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

npm install --save @[email protected]

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

+ [email protected]
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.

Просто добавьте эти три строки в тег Head в index.html.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 tejeswar04 нояб. 2018 г., 09:04
index.html заботится обо всех вещах. и это похоже на добавление начальной загрузки на обычную HTML-страницу

jquery и bootstrap с помощью этих команд

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

После добавления этих строк в ваш файл 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"
  ]
 user231257827 апр. 2017 г., 16:34
Вы имели в виду $ projectRoot / .angular-cli.json?
Решение Вопроса

ВАЖНОЕ ОБНОВЛЕНИЕ: NG2-самозагрузка теперь заменяетсяNGX-самозагрузка

NGX-самозагрузка поддерживает Angular 3 и 4.

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

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

ng -v

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

устанавливатьNGX-самозагрузка а такженачальная загрузка:

npm install ngx-bootstrap bootstrap --save

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

открытоSRC / приложение / app.module.ts и добавить:

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

открытоУгловой-cli.json и вставьте новую запись вstyles массив:

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

открытоЦСИ / приложение / app.component.html и добавить:

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

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

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

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

npm install ngx-bootstrap --save

Затем откройтеугловые-CLI-build.js и добавьте эту строку:

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

Теперь откройте свойSRC / Система-config.ts затем написать:

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

...а также:

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};
 jbandi09 нояб. 2016 г., 22:03
Небольшое замечание для будущих читателей: Angular CLI с бета-версии 14 переключился с SystemJS на WebPack. Этот ответ уже устарел, поскольку предоставляет решение на основе SystemJS.
 Maludasek28 июл. 2018 г., 16:10
Наконец-то хорошее решение. Не удалось найти angular-cli.json (angular-cli 6.1.1), поэтому я изменил файл angular.json, раздел "styles". Я добавил "node_modules / bootstrap / dist / css / bootstrap.min.css"
 Stack crawler18 февр. 2018 г., 15:24
Спасибо за этот ответ! К сожалению, я не могу загрузить панели начальной загрузки с этим. Но приведенный вами пример предупреждения работает. Вы можете помочь с этим, пожалуйста?
 sandrooco20 авг. 2016 г., 14:51
Отличный ответ, большое спасибо! Как я могу использовать scss / sass таким образом?
 Achuth hadnoor07 окт. 2016 г., 16:51
github.com/ngCli/ng-cli/issues/18 любая помощь в этом вопросе я рад получить его
 bruno.bologna27 дек. 2016 г., 02:28
Спасибо за идею использования ng2-bootstrap, здесь я нашел руководство по установке angular cli на странице github.github.com/valor-software/ng2-bootstrap/blob/development/docs/... В моем случае при импорте отсутствовал вызов AlertModule.forRoot ().
 Edmond24 июн. 2017 г., 13:35
У меня была такая же проблема с[email protected] & [email protected], Следуя этим шагам с разницей вapp.module.ts не относится кNGX-самозагрузка с помощью 'ngx-bootstrap / ngx-bootstrap', но с помощью 'ngx-bootstrap', как в этом примере вGitHub исправить мою проблему
 Ali Ghanavatian29 июл. 2016 г., 07:47
@mjwrazor потому что начальная загрузка - это не только стили. это интерфейсная часть. чтобы быть ясно проверить с помощьюкомпонент рейтинга с ng2-bootstrap и подумайте о кодах, которые вы написали бы для его реализации.
 MWB27 апр. 2019 г., 10:56
Работал на меня, хотя мне нужно было"./node_modules/bootstrap/dist/css/bootstrap.min.css" вместо"../node_modules/bootstrap/dist/css/bootstrap.min.css"!
 mjwrazor16 июл. 2016 г., 03:22
Что такое ng2-bootstrap? что означает добавление нативной начальной загрузки в angular 2? Извините, я в замешательстве и посмотрел, но все еще в замешательстве. почему я не могу предпринять те же шаги для загрузки начального загрузчика вместо использования стороннего ng2-bootstrap.
 pd farhad20 авг. 2016 г., 14:56
Я никогда не использовал scss / sass, но думаю, это не будет так сложно. Кстати, если вы думаете, что это хороший ответ, не возражайте против него: D
 Alesh Houdek12 авг. 2017 г., 16:55
Обратите внимание, чтоangular-cli.json теперь скрыто, так что вам нужно.angular-cli.json, Я подозреваю, что это означает, что есть лучший способ сделать это?

npm i --save [email protected]. Теперь перейдите в папку nodemodules и из папки начальной загрузки скопируйте путь к «bootstrap.min.css.js» и вставьте полный путь (например,nodemodules/bootstrap/css/bootstrap.min.css.js) вangular.json под файлом сценария и перезапустите сервер, чтобы проверить, прошла ли установка успешно, запустите программу в любом браузере и нажмите F12, вы увидите, что часть окна открывается, теперь перейдите на вкладку «Элементы», откройте заголовок и если вы видите загрузчик в теге style, значит, установка прошла успешно.

Установите загрузчик, popper.js

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

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

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

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

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>
 Winnemucca26 февр. 2017 г., 15:34
что-то изменилось на радиоуправлении. не работает
 72GM25 янв. 2017 г., 11:08
если вы хотите использовать Bootstrap 4, то вам нужно изменить "npm install ng2-bootstrap bootstrap --save" TO BE "npm install ng2-bootstrap [email protected] --save" .... не полностью очевидно из документации (выполните поиск 'card-' в bootstrap.css, чтобы узнать, сработал ли он) ... обратите внимание, что в настоящее время это Alpha 6, это без сомнения изменится ... проверьте сайт начальной загрузки для текущей инструкции npm
 PeterH28 окт. 2016 г., 18:19
Метод от Ахмеда Хамди работает, по-видимому, сейчас произошло обновление кода. Обновил свое сообщение с решением.

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

устанавливатьнг-самозагрузка зависимость.

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.

Установите Bootstrap с помощью npm

npm install bootstrap

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

npm install --save popper.js

3.Gotoangular.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 i bootstrap-schematics
ng generate bootstrap-shell -c bootstrap-schematics -v 4
npm install

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

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

а и введите следующую команду.

npm install --save bootstrap

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

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

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

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

Все сделано.

npm install --save bootstrap

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

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

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

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

установить boostrap используя npm

npm install [email protected] --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 "[email protected]/material/prebuilt-themes/indigo-pink.css // angular material theme

вот и все.

 CodyBugstein30 окт. 2017 г., 21:20
Как насчет положить его в массив стилейangular-cli.json? Не обязательно?
 CodyBugstein01 нояб. 2017 г., 14:44
Ах, хорошо .. но я думаю, в том числе вangular-cli.json наверное лучше
 Chanaka Fernando31 окт. 2017 г., 05:16
Нет, это не обязательно. так как мы включаем наш файл style.css в этот массив. мы можем импортировать другие CSS-файлы в нашем style.css или style.scss "@import" [email protected]/material/prebuilt-themes/indigo-pink.css ";" @import "../node_modules/bootstrap/dist/css /bootstrap.css ";
 Keith04 апр. 2018 г., 19:40
@CodyBugstein Я не уверен, что лучше «добавить» его в .angular-cli.json. Вот несколько причин, почему вы можете захотеть добавить импорт в ваш файл styles.scss: 1) Вы можете легко применить тему начальной загрузки, например, пример Bootswatch:github.com/thomaspark/bootswatch 2) Редактирование файлов .json более обременительно, чем редактирование файлов .scss, поскольку файлы .json не допускают комментарии, и 3) новые разработчики могут рассматривать styles.scss как отправную точку для всего CSS, а не .angular-cli.json ,

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

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

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

нг новый AngularBootstrapTest

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

cd AngularBootstrapTest

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

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

Добавить 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

Тестовый бутстрап

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

.

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

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

сохранить файл

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

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

Теперь вы увидите кнопку стиля начальной загрузки на странице

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

и ответы здесь полностью смешаны, я просто предлагаю перейти софициальная 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 {
}

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

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

какую платформу JS вы используете, импортировать загрузчик в ваш проект легко, выполнив 2 шага ниже:

Установите загрузчик с помощьюnpm i -S bootstrap или жеyarn add bootstrap.

Вstyles.css или жеstyles.scssИмпортируй самозагрузку как@import '~bootstrap/dist/css/bootstrap.min.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"
  ],


npm install [email protected] --save-dev Это установит последнюю версию загрузчика, однако указанную версию можно установить, добавив номер версии.

Шаг 2: Откройте styles.css и добавьте следующее@import "~bootstrap/dist/css/bootstrap.css"

 Sydwell12 февр. 2019 г., 13:20
В основномток лучший ответ, кроме удаления --save-dev. Как вы хотите, чтобы начальная загрузка была развернута вместе с вашим приложением.
Беги в баш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" ],

-cli о том, как включить Bootstrap:https://github.com/angular/angular-cli/wiki/stories-include-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 [email protected] --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 [email protected] --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;

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

 Johan Frick07 янв. 2018 г., 12:19
$brand-primary: red; не работал для меня. Тем не мение,$primary: red;сделал!
 Robin van der Knaap28 мая 2017 г., 01:34
Это решение не добавляет файлы Javascript для начальной загрузки, только CSS
 Venkatesh Muniyandi04 авг. 2018 г., 02:29
Спасибо за объяснение разницы между bootstrap и boostrap @ next :-)
 Robin van der Knaap28 мая 2017 г., 01:37
Смотрите эту другую историю:github.com/angular/angular-cli/wiki/stories-global-lib, В нем описывается добавление файлов сценариев на примере начальной загрузки 4.

Ваш ответ на вопрос