Мы хотим использовать загрузчик 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 с помощью следующей команды в терминале:
Если угловой кли версия больше , чем 1.0.0-beta.11-WebPack , то вы должны выполнить следующие шаги:
Установите ngx-bootstrap и bootstrap :
Эта строка устанавливает Bootstrap 3 в настоящее время, но может установить Bootstrap 4 в будущем. Имейте в виду, что ngx-bootstrap поддерживает обе версии.
Откройте src / app / app.module.ts и добавьте:
Откройте angular-cli.json (для angular6 и более поздних версий имя файла изменилось на angular.json ) и вставьте новую запись в
styles
массив:Откройте src / app / app.component.html и добавьте:
1.0.0-бета.10 или ниже:
И, если ваш угловой кли версия 1.0.0-beta.10 или ниже, то вы можете использовать следующие шаги.
Сначала перейдите в каталог проекта и введите:
Затем откройте ваш angular-cli-build.js и добавьте эту строку:
Теперь откройте ваш src / system-config.ts и напишите:
...и:
источник
angular-cli@1.1.3
&ngx-bootstrap@1.7.1
. Следуя этим шагам с той разницей, чтоapp.module.ts
не с помощью ngx-bootstrap обращайтесь к ngx-bootstrap / ngx-bootstrap, а к ngx-bootstrap, как в этом примере на github, исправьте мою проблему.Поиск ключевого слова> Установка глобальной библиотеки на https://github.com/angular/angular-cli поможет вам найти ответ.
Согласно их документу, вы можете предпринять следующие шаги, чтобы добавить библиотеку Bootstrap.
Сначала установите Bootstrap из npm:
Затем добавьте необходимые файлы сценариев в apps [0] .scripts в файле angular-cli.json:
Наконец, добавьте Bootstrap CSS в массив apps [0] .styles:
Перезапустите ng serve, если вы его запускаете, и Bootstrap 4 должен работать в вашем приложении.
Это лучшее решение. Но если вы не перезапустите службу, она никогда не будет работать. Настоятельно рекомендуется сделать это последнее действие.
источник
ng serve
снова. Кроме того, почему Angular CLI не может добавить это автоматически? Было бы хорошо, если бы у нас был выбор для этого.Сделайте следующее:
Это добавит загрузчик 4 в ваш проект.
Затем перейдите к своему файлу
src/style.scss
илиsrc/style.css
файлу (выберите тот, который вы используете) и импортируйте туда загрузочный файл:Для style.css
Для style.scss
Для сценариев вам все равно придется добавить файл в файл angular-cli.json следующим образом ( в версии Angular 6 это редактирование необходимо выполнить в файле angular.json ) :
источник
Сначала вы должны установить tether, jquery и bootstrap с помощью этих команд
После добавления этих строк в ваш файл angular-cli.json (angular.json начиная с версии 6)
источник
Поскольку никто еще не ссылался на официальную историю (команды angular-cli) о том, как включить Bootstrap: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap
Включить Bootstrap
Bootstrap - это популярный CSS-фреймворк, который можно использовать в проекте Angular. Это руководство проведет вас через добавление начальной загрузки в ваш проект Angular CLI и настройку его для использования начальной загрузки.
Использование CSS
Начиная
Создайте новый проект и перейдите в проект
Установка Bootstrap
После того, как новый проект создан и готов, вам нужно будет установить загрузчик в свой проект как зависимость. Используя эту
--save
опцию, зависимость будет сохранена в package.jsonКонфигурирование проекта
Теперь, когда проект настроен, он должен быть настроен на включение загрузочного CSS.
.angular-cli.json
из корня вашего проекта.apps
первый элемент в этом массиве является приложением по умолчанию.styles
позволяющее применять внешние глобальные стили к вашему приложению.bootstrap.min.css
Когда вы закончите, это должно выглядеть следующим образом:
Примечание. При внесении изменений
.angular-cli.json
вам потребуется перезапустить,ng serve
чтобы получить изменения конфигурации.Тестовый проект
Откройте
app.component.html
и добавьте следующую разметку:С настроенным приложением запустите его,
ng serve
чтобы запустить его в режиме разработки. В вашем браузере перейдите к приложениюlocalhost:4200
. Убедитесь, что появляется кнопка в стиле начальной загрузки.Использование SASS
Начиная
Создайте новый проект и перейдите в проект
Установка Bootstrap
Конфигурирование проекта
Создайте пустой файл
_variables.scss
вsrc/
.Если вы используете
bootstrap-sass
, добавьте следующее_variables.scss
:В
styles.scss
добавьте следующее:Тестовый проект
Откройте
app.component.html
и добавьте следующую разметку:С настроенным приложением запустите его,
ng serve
чтобы запустить его в режиме разработки. В вашем браузере перейдите к приложениюlocalhost:4200
. Убедитесь, что появляется кнопка в стиле начальной загрузки. Чтобы убедиться, что ваши переменные используются, откройте_variables.scss
и добавьте следующее:Вернитесь в браузер, чтобы увидеть, как изменился цвет шрифта.
источник
$brand-primary: red;
не работал для меня. Тем$primary: red;
не менее, сделал!Обновление v1.0.0-beta.26
Вы можете увидеть в документе новый способ импорта начальной загрузки здесь.
Если это все еще не работает, перезапустите с командой ng serve
1.0.0 или ниже версии:
В вашем файле index.html вам просто нужна ссылка для начальной загрузки css (нет необходимости в js-скриптах)
И
После установки ng2-bootstrap в my_project / src / system-config.ts:
И в my_project / angular-cli-build.js:
Не забудьте эту команду, чтобы поместить ваш модуль в поставщика:
импортировать из другого модуля по тому же принципу.
источник
Я предполагаю, что вышеупомянутые методы изменились после выпуска, проверьте эту ссылку
https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md
инициировать проект
установить ng-bootstrap и bootstrap
откройте src / app / app.module.ts и добавьте
откройте angular-cli.json и вставьте новую запись в массив стилей
Откройте src / app / app.component.html и протестируйте все работы, добавив
источник
Создать проект Angular 5
нг новый AngularBootstrapTest
Переместить в каталог проекта
cd AngularBootstrapTest
Скачать загрузчик
npm установить загрузчик
Добавить Bootstrap в проект
4.1 открыть .angular-cli.json
4.2 найти раздел «стили» в json
4.3 добавьте путь начальной загрузки css, как показано ниже
,
Тестовый бутстрап
src/app/app.component.html
,
Вы можете ссылаться на стили кнопок здесь ( https://getbootstrap.com/docs/4.0/components/buttons/ )
сохранить файл
запустить проект
нг служить --открыто
Теперь вы увидите кнопку стиля начальной загрузки на странице
Примечание: если вы добавили путь начальной загрузки после ng serve , вы должны остановить и повторно запустить ng serve, чтобы отразить изменения
источник
Так как это стало настолько запутанным, и ответы здесь полностью смешаны, я просто предлагаю пойти с официальной командой ui для репозитория BS4 (да, таких репозиториев для NG-Bootstrap так много.
Просто следуйте инструкциям здесь https://github.com/ng-bootstrap/ng-bootstrap, чтобы получить BS4.
Цитата из библиотеки:
Просто скопируйте вставку ради этого:
После установки вам необходимо импортировать наш основной модуль:
Единственная оставшаяся часть - перечислить импортированный модуль в модуле приложения. Точный метод будет немного отличаться для корневого (верхнего уровня) модуля, для которого вы должны получить код, подобный (обратите внимание на NgbModule.forRoot ()):
Другие модули в вашем приложении могут просто импортировать NgbModule:
Это, кажется, наиболее последовательное поведение на сегодняшний день
источник
Установить загрузчик
Добавьте код в .angular-cli.json:
Последнее добавление bootstrap.css в ваш код style.scss
Перезагрузите ваш локальный сервер
источник
Выполните следующие шаги:
npm install --save bootstrap
А в вашем .angular-cli.json добавьте в раздел стилей:
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css"]
После этого вы должны перезапустить свою нг подачу
наслаждаться
источник
Установите Bootstrap, используя npm
2. Установите Popper.js
3.Goto angular.json в проекте Angular 6 / .angular-cli.json в Angular 5 и добавьте следующее:
источник
Попробуй это
https://github.com/angular/angular-cli#global-library-installation
источник
Вы также можете посмотреть это видео Майка Брокки, в котором содержится полезная информация о том, как добавить загрузчик в ваш проект, созданный в Angular-Cli. https://www.youtube.com/watch?v=obbdFFbjLIU (около 13:00)
источник
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" ],
источник
Откройте терминал / командную строку в соответствующем каталоге проекта и введите следующую команду.
Затем откройте файл .angular-cli.json, найдите
"styles": [ "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, разделе стилей.Установите зависимость ng-bootstrap .
Добавьте это в ваш основной класс модуля.
Включите в раздел импорта основного модуля следующее.
Сделайте следующее также в ваших подмодулях, если вы собираетесь использовать компоненты ng-bootstrap внутри этих классов модулей.
Теперь ваш проект готов к использованию доступных компонентов ng-bootstrap.
источник
npm install --save bootstrap
npm install --save popper.js
@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 оба
после выполнения этой команды, пожалуйста, проверьте папку «node_modules», в которой вы сможете увидеть загрузчик и jquery.
источник
angular-cli
теперь есть специальная вики-страница, где вы можете найти все, что вам нужно. TLDR, установитьbootstrap
черезnpm
и добавьте ссылку на стили в раздел "styles" в вашем.angular-cli.json
файлеисточник
Рабочий пример в случае использования angular-cli и css:
1. установить загрузчик
npm установить загрузчик
2. добавить в .angular-cli.json
источник
установить boostrap используя npm
затем проверьте папку node_modules на наличие файла boostrap.css (в пределах dist), обычно путь
добавить этот путь | импорт boostrap в style.css или style.scss
Это оно.
источник
angular-cli.json
? Не обязательно?angular-cli.json
это, вероятно, лучшеЗапустите следующую команду внутри проекта
и если вы получите подтверждение, как это
Это означает, что boostrap 4 успешно установлен. Однако, чтобы использовать его, вам необходимо обновить массив «styles» в файле angular.json.
Обновите его следующим образом, чтобы начальная загрузка могла переопределить существующие стили
Чтобы убедиться, что все настроено правильно, запустите
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.источник
Не видел этого здесь:
Я только добавил эту строку в style.scss. В моем случае я также хотел переопределить переменные начальной загрузки.
источник
Если вы только начали с angular и bootstrap, то простой ответ будет ниже шагов: 1. Добавьте пакет узла начальной загрузки как зависимость dev
импортировать загрузочную таблицу стилей в файл angular.json.
"styles": [ "projects/my-app/src/styles.scss", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],
и вы готовы использовать начальную загрузку для укладки, сетки и т. д.
<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 вашего проекта
источник
Запустите эту команду
ваш Angular.json
источник
Вы можете установить загрузчик в угловом положении, используя
npm install bootstrap
команды.и следующий путь начальной загрузки в
angular.json
файле иstyle.css
файле.Вы можете прочитать полный блог о том, как установить и настроить начальную загрузку, нажмите здесь, чтобы прочитать полный блог об этом
источник
Рабочий пример в случае использования angular-cli:
Работает для CSS и SCSS. Bootstrap v3 и v4 доступны.
Более подробную информацию о схемах начальной загрузки смотрите здесь .
источник