Как включить popper.js и bootstrap.js в проекте angular

ProgramBox

Как включить popper.js и bootstrap.js в проекте angular

Post author:admin
Запись опубликована:29 декабря, 2022
Post category:Вопросы по программированию

#javascript #html #jquery #angular #openlayers

#javascript #HTML #jquery #angular #openlayers

Вопрос:

Я использую angular с openlayers и следую примеру, размещенному ниже по ссылке:

         https://openlayers.org/en/latest/examples/overlay.html

вышеупомянутая ссылка предоставляет следующую информацию для работы с всплывающим окном:

 Things to know when using the popover plugin:
Popovers rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js in order for popovers to work!

пожалуйста, дайте мне знать, как включить

 popper.js

 bootstrap.js

таким образом, я могу работать с функцией popover и заставить ее работать.

изображение:

Ответ №1:

Вы можете добавить node_modules/dist/css/boostrap.min.css стили в разделе сборки файла angular.json РАНЕЕ src/styles.css . Вы можете загрузить начальную загрузку из пакета npm npm install bootstrap

Для работы с всплывающими окнами вы можете добавить файл пакета bootstrap node_modules/bootstrap/dist/js/bootstrap.bundle.min.js в скрипты в разделе сборки того же файла.

РЕДАКТИРОВАТЬ: вам также необходимо загрузить jQuery и добавить его в раздел скриптов.

1. пожалуйста, я выполнил шаги, которые вы упомянули, но я получаю ту же ошибку, что и на прилагаемом снимке экрана

2. пожалуйста, я выполнил шаги, которые вы упомянули, но я получаю ту же ошибку, что и на прилагаемом снимке экрана

3. Хотя, это не рекомендуется. Я использую jQuery для функциональности всплывающих окон компонентов начальной загрузки. Вы можете установить jQuery с помощью npm install jquery и добавить его с помощью node_modules/jquery/dist/jquery.min.js в раздел скриптов при сборке файла angular.json вместе с добавлением node_modules/bootstrap/dist/js/bootstrap.bundle.min.js .

4. я загрузил его с помощью npm install jquery

5. Добавьте node_modules/jquery/dist/jquery.min.js в свои скрипты сборки в angular.json

Ответ №2:

Просто используйте npm для установки :-

[проппер]: > https://www.npmjs.com/package/propper

npm i поддерживает —сохранить

[начальная загрузка]: > https://www.npmjs.com/package/bootstrap

npm i bootstrap —сохранить

1. пожалуйста, я выполнил шаги, которые вы упомянули, но я получаю ту же ошибку, что и на прилагаемом снимке экрана

2. вы используете angular js или angular?

3. Вам необходимо установить jquery npm i jquery --save , чтобы использовать как bootstrap, так и propper

4. как мне узнать, является ли это angular или angular js ??извините, я новичок в этой технологии

5. angular js — это 1-я версия, которая была написана на ванильном js и фреймворке mvc, где, как и angular, версия 2 написана на машинописном языке и использует концепцию компонента / модуля.

Ответ №3:

Есть несколько шагов, которым вы должны следовать.

 -1. Install Jquery like npm instll jquery -save
-2. Install latest bootStrap npm install bootstrap@4.3.1 --save
-3. Install Popper js like npm install popper.js --save

А затем добавьте стили и скрипты в файл angular.json, например

========================================================================

1. стили начальной загрузки должны быть выше styles.css , чтобы они не переопределяли ваши стили.

2. пожалуйста, я выполнил шаги, которые вы упомянули, но я получаю ту же ошибку, что и на прилагаемом снимке экрана

Ответ №4:

для внешнего JavaScript или любого файла, который вы хотите реализовать в angular. вы должны указать путь к этим файлам в файле angular.json

angular.json

для более старой версии angular необходимо указать путь к .angular.cli.json

Примечание: — после внесения изменений в файл angular.json вам необходимо перекомпилировать или перезапустить проект.

вы можете импортировать файлы в index.html досье.

1. пожалуйста, просто укажите имя файла .js, или я должен загрузить его и сохранить в определенном файле, а затем указать путь к файлу

2. вы также можете объявить на index.html досье. позвольте мне обновить ответ

3. @user2121 выполните установку npm, а затем добавьте необходимый файл из папки dist внутри node_modules в angular.json . Таким образом, вы могли бы выполнить обновление npm и не обновлять путь к скрипту вручную, если вам нужно изменить версию.