Bootstrap 5 in angular project via angular.json file

Issue

I built a new angular project using the cli

ng new memmory-game

I want to use bootstrap and because I know that bootstrap 5 has dropped the jQuery dependency, I'm opting to not use something like ng-bootstrap

The installed bootstrap via npm as well as popperjs

Here is my package.json file so you can see my dependencies.

  "dependencies": {
    "@angular/animations": "~13.3.0",
    "@angular/common": "~13.3.0",
    "@angular/compiler": "~13.3.0",
    "@angular/core": "~13.3.0",
    "@angular/forms": "~13.3.0",
    "@angular/platform-browser": "~13.3.0",
    "@angular/platform-browser-dynamic": "~13.3.0",
    "@angular/router": "~13.3.0",
    "@popperjs/core": "^2.11.5",
    "bootstrap": "^5.1.3",
    "popper.js": "^1.16.1",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },

You can see that I actually installed both popper.js and popperjs/core because I wasn't actually sure which one I needed.

In app.component.html I put some bootstrap components.

Without styles, it looks like this.

If I use @import in styles.scss in the root of my project, everything works.

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css"

These look correct but still don't quite work correctly. The tooltip doesn't display and the dropdown doesn't work.

If I include the bootstrap javascript file via cdn in the index.html file, the dropdown starts working.

But say I want to move the javascript and the css into the angular.json file like a lot of tutorials recommend.

I've removed the cdn from the index.html file and I've removed the import from the styles.scss file and moved them into angular.json like so.

but suddenly my page is broken again. All of the styles are gone and the drop-down doesn't work. I've tried updating the path in the angular.json file to remove the ./ but that doesn't help.

I'm not sure what I'm doing wrong. Is there a reason why my angular.json file isn't loading my styles and scripts like expected? Should I even bother with this or is loading things in via my scss file and from a script cdn loaded via the html fine?

Solution

You're doing it right adding the resources in the angular.json file.

But, looks like you're importing the resources in the wrong place.

You need to import styles and scripts in the build section of the angular.json which is typically a little higher in the file.

Like this: (please, ignore the "**", are just to highlight the sections)

"architect": {
        **"build": {**
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/website",
            "index": "projects/website/src/index.html",
            "main": "projects/website/src/main.ts",
            "polyfills": "projects/website/src/polyfills.ts",
            "tsConfig": "projects/website/tsconfig.app.json",
            "assets": [
              "projects/website/src/favicon.ico",
              "projects/website/src/assets",
              "projects/website/src/.htaccess"
            ],
            **"styles": [**
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "projects/website/src/styles.scss"
            ],
            **"scripts": [**
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ],

You will still need to import these resources in the test section if you're planning to do unit/e2e testing.

Answered By - iamlordsandro