CODEWITHSUNDEEP
angularbootstrap-5
natyus
natyus

Reputation: 647

How to install Bootstrap 5 with Popper in an Angular application

I am trying to implement a bootstrap dropdown in my Angular component, but it doesn't work. The dropdown doesn't open on click, instead I get console-errors. I tried to create a bootstrap-modal and it didn't work either. Yet there were no errors. After doing some research, I found out that I have to include popper.js and bootstrap.min.js in my project.json (nrwl equivalent to angular.json). I added it to the "scripts"-array:

"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';

Despite those changes, my dropdown still doesn't work.

I use the latest Bootstrap 5.2.3 together with Angular 12.2.5. Does anyone have any idea what I am doing wrong?

Upvotes: 1

Views: 2571

Answers (1)

kellermat
kellermat

Reputation: 4515

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:

  1. I installed bootstrap: npm i bootstrap
  2. I installed @popperjs/core: npm i @popperjs/core
  3. 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

Upvotes: 3

Related Questions