如何在 Angular 项目中包含 popper.js 和 bootstrap.js

Question

我正在使用带有 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 功能并让它工作。

图片：

Answer 1

您可以在 src/styles.css 之前的 angular.json 文件的 build 部分下的样式中添加 node_modules/dist/css/boostrap.min.css。你可以从npm包npm install bootstrap下载引导程序

为了使用弹出窗口，您可以在同一文件的 build 部分下的脚本中添加 bootstrap node_modules/bootstrap/dist/js/bootstrap.bundle.min.js 的捆绑文件。

编辑：您必须下载 JQuery 并将其添加到您的脚本部分。

Answer 2

用于外部 JavaScript 或任何您想在 Angular 上实现的文件。 您必须在 angular.json 文件中设置该文件的路径

angular.json

对于有角度的旧版本需要设置路径 .angular.cli.json

注意 :- 更改 angular.json 文件后，您必须重新编译或重新启动项目。

您可以将文件导入到 index.html 文件中。

Answer 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 文件中，如

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

Answer 4

只需使用 npm 安装即可：-

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

npm i propper --save

[引导程序]：>https://www.npmjs.com/package/bootstrap

npm i bootstrap --save