3

I am using angular with openlayers and I am following the example posted below in the link:

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

the aforementioned link provide the following information in order to work with the popover:

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!

please let me know how to include

popper.js

and

bootstrap.js

so i can work with the popover function and get it working.

image:

enter image description here

Improve this question
2

5 Answers 5

Reset to default
2

You can add node_modules/dist/css/boostrap.min.css in styles under the build section of angular.json file BEFORE src/styles.css. You can download the bootstrap from the npm package npm install bootstrap

In order to work with the pop ups you can add the bundle file of bootstrap node_modules/bootstrap/dist/js/bootstrap.bundle.min.js in the scripts under the build section of the same file.

EDIT: You have to download JQuery and add it to your scripts section as well.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

please, i followed the steps you mentioned but i get the same error as shown in the attached screen shot
please, i followed the steps you mentioned but i get the same error as shown in the attached screen shot
Although, it's not recommended. I am using jQuery for the pop ups functionality of bootstrap components. You can install jQuery using npm install jquery and add it by using node_modules/jquery/dist/jquery.min.js to the scripts section under the build of angular.json file alongwith adding node_modules/bootstrap/dist/js/bootstrap.bundle.min.js.
i downloaded it using npm install jquery
Add node_modules/jquery/dist/jquery.min.js in your scripts of build in angular.json
0

There are some step that you have to follow.

-1. Install Jquery like npm instll jquery -save
-2. Install latest bootStrap npm install [email protected] --save
-3. Install Popper js like npm install popper.js --save

And then add styles and scripts into angular.json file like enter image description here

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

Improve this answer

2 Comments

bootstrap styles should be above above styles.css, so that it doesn't override your styles.
please, i followed the steps you mentioned but i get the same error as shown in the attached screen shot
0

for external JavaScript or any file that you want to implement on angular. you have to set path for that files on angular.json file

angular.json

enter image description here

for angular older version need set path on .angular.cli.json

Note :- after changes on angular.json file, you have to recompile or restart project.

you can import files into index.html file. enter image description here

Improve this answer

3 Comments

please, should just include the name of the .js file or i have to download it and save it in a specific file and then refer to the path of the file
you can also declare on index.html file. let me update answer
@user2121 do npm install and then add the required file from dist folder inside node_modules to angular.json. This way you could do npm update and dont have to update script path manually if you need change version.
0

It's more easy to import bootstrap in the index.html file like this.

enter image description here

You can find the link here https://getbootstrap.com/

enter image description here

Improve this answer

Comments

-1

Just use npm to install :-

[propper]: > https://www.npmjs.com/package/propper

npm i propper --save

[bootstrap]: > https://www.npmjs.com/package/bootstrap

npm i bootstrap --save

Improve this answer

8 Comments

please, i followed the steps you mentioned but i get the same error as shown in the attached screen shot
are you using angular js or angular ?
You need to install jquery npm i jquery --save in order to use both bootstrap and propper
how should i know if it is angular or angular js??sorry i am new to this technology
angular js is 1st version which was written in vanilla js and a mvc framework where as angular which is 2+ version is written in typescript and uses component / module concept.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.