I'm trying to install Bootstrap 5 to a Angular 12 project. Everything works fine when importing Bootstrap styles JS via CDN, but when I try to install ist locally via npm, the Javascript part seems to fail. It seems like the entries in my angular.json file are ignored.

Installation via npm:

npm install bootstrap --save

Adding the styles works.

@import "~bootstrap/dist/css/bootstrap.css";

But when I add the JS file in angular.json, nothing happens - no animations.

"scripts": [
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

I've even installed JQuery & Popper (although it should not be needed in Bootstrap 5) and added it to the "scripts" array. No effect. Adding the styles via angular.json also does not work. As soon as I remove it from styles.scss, the styles are gone.

Further note: I've configured Angular to use SCSS. So I've also tried to import the SCSS styles, but it didn't change anything as well.

It seems like the JS file is being ignored. According to serveral tutorials, this should actually work. Unfortunatly, I'm overseeing something. I'm new to Angular Bootstrap, so please bear with me if it is something obvious.

Here's the full angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "waiter-view": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/waiter-view",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "serviceWorker": true,
            "ngswConfigPath": "ngsw-config.json"
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "waiter-view:build:production"
            },
            "development": {
              "browserTarget": "waiter-view:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "waiter-view:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.scss"

            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "waiter-view"
}

CodePudding user response：

After npm install bootstrap --save run following command:

npm i @popperjs/core

After this command it always works for me.

CodePudding user response：

Why you don't give a try to "ng-bootstrap (Bootstrap widgets)"? https://ng-bootstrap.github.io/#/home

The angular way Angular widgets built from the ground up using only Bootstrap 4 CSS with APIs designed for the Angular ecosystem.

For angular 12, you could use ng-bootstrap 10 (which contains Bootstrap 4.5), and for Bootstrap 5 you should use Angular 13 and ng-bootstrap 12.0.0-beta.X

*The only doubt I have is, -- just as you said--, if now that Bootstrap 5 doesn't need JS/Jquery, I don't know if ngBootstrap is needed anymore.