如何在Angular应用中安装Bootstrap 5和Popper

Question

我试图在我的Angular组件中实现一个引导下拉菜单，但它不起作用。下拉菜单没有打开点击，而是我得到控制台错误。我试图创建一个引导模式，它也不起作用。然而没有任何错误。在做了一些研究之后，我发现我必须在我的项目中包括popper.js和bootstrap.min.js。Json (nrwl相当于angular.json)。我把它添加到"scripts"-数组:

"name": "nosi",
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"projectType": "application",
"sourceRoot": "apps/nosi/src",
"prefix": "nosi",
"targets": {
"build": {
"executor": "@angular-devkit/build-angular:browser",
"outputs": ["{options.outputPath}"],
"options": {
"outputPath": "dist/apps/nosi",
"index": "apps/nosi/src/index.html",
"main": "apps/nosi/src/main.ts",
"polyfills": "apps/nosi/src/polyfills.ts",
"tsConfig": "apps/nosi/tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": ["apps/nosi/src/favicon.ico", "apps/nosi/src/assets"],
"styles": ["apps/nosi/src/styles.scss"],
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/popper.js/dist/umd/popper.js"
]
},

我还添加了bootstrap.min.css到我的样式。scss文件:

/* You can add global styles to this file, and also import other style files */
/* Importing Bootstrap SCSS file. */
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~bootstrap/dist/css/bootstrap.css';

尽管做了这些更改，我的下拉菜单仍然不能工作。

我使用最新的Bootstrap 5.2.3Angular 12.2.5． 有人知道我做错了什么吗?

Answer 1

我遇到了同样的问题，但我现在找到了一个解决方案:由于popper.js被弃用，您必须使用@popperjs/core代替。更重要的是，您应该注意angular.json中"scripts"-数组中条目的顺序(下面将详细介绍)。

这是我最终成功的方法:

1. 我安装了bootstrap:npm i bootstrap
我安装了@popperjs/core:npm i @popperjs/core
2. 我添加了一些条目到我的angular.json，你可以看到下面:

"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.scss"
],
"scripts": [
"node_modules/@popperjs/core/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.js"
]

重要:

• "script"-array中的脚本顺序必须与这里描述的相同:先popper.min.js，再bootstrap.js。
• 你的项目中node_modules的路径可能与我的不一样(正如我所看到的，你的路径从../开始，因此你必须写"../node_modules/@popperjs/核心/dist//popper.min.js"umd格式;等等)。
• 我认为你在styles.scss的进口是不需要的