how to make Angular bootstrap dropdown working-CodePudding

I am trying to implement an bootstrap dropdown to my angular component, but it does not work. its not opening on click and showing me the errors. I had the same problem with modal. There is no error or anything alike. After searching a bit I found out I have to include popper.js and bootstra.min.js in my project.json (nrwl equivalent to angular.json) Like this it is in the scripts part:

"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"
        ]
      },

Also I added bootstrap.min.css to my styles.scss file:

/* 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';

But still there is no reaction in my dropdown. Also I am using the latest Bootstrap 5.2.3 with Angular 12.2.5. Could someone please tell me where I have to also look?

CodePudding user response：

I ran into the same issue, yet I found a solution now: Since popper.js is deprecated, you have to use @popperjs/core instead. What's more, you should pay attention to the order of the entries in the "scripts"-array in angular.json (more about this further below).

This is what eventually worked for me:

I installed bootstrap: npm i bootstrap
I installed @popperjs/core: npm i @popperjs/core
I added some entries to my angular.json as you can see below:

"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"
]

Important:

The order of the scripts in "script"-array must be same as depicted here: First popper.min.js, then bootstrap.js.
Also the path to node_modules in your project might not be the same as mine (as I can see, your paths start with ../, therefore you would have to write "../node_modules/@popperjs/core/dist/umd/popper.min.js" etc).
I think the imports you made in styles.scss are not needed