Add Bootstrap 4, jQuery and Font Awesome To Angular

In this article, we will learn how to add Bootstrap 4, jQuery and Font Awesome to an Angular application.

Prerequisites:

• Basic knowledge of Angular
• Code editor like Visual Studio Code

Create a new Angular project by typing the following command in the VSCode terminal then open the newly created project.

ng new project-name

Bootstrap 4

The newest version of Bootstrap is Bootstrap 4, which is the most popular HTML, CSS, and JavaScript framework for developing responsive and mobile-first websites. Bootstrap is an open-source CSS framework, directed at responsive front end web development. It contains JavaScript and CSS based design templates for buttons, typography, navigation, forms, and other interface components.

To add Bootstrap 4 in the Angular Project, install the bootstrap package by typing the following command in the VSCode terminal.

npm install bootstrap

Note: You must have to add jQuery because Bootstrap uses jQuery for JavaScript plugins.

jQuery

jQuery is a JavaScript library, designed to simplify HTML DOM (Document Object Model) manipulation and tree traversal, as well as Event Handling and CSS Animation. It is an open-source library. As of May 2019, jQuery is used by 73% of the 10M most popular websites.

To add jQuery in the Angular Project, install the jquery package by typing the following command in the VSCode terminal.

npm install jquery

Font Awesome

Font Awesome is a toolkit for icons and fonts, based on CSS and LESS. Font Awesome was created by Dave Gandy to use it with Twitter Bootstrap and later it was incorporated into the Bootstrap CDN.

To add Font Awesome in the Angular Project, install the font-awesome package by typing the following command in the VSCode terminal.

npm install font-awesome

Now, we have to reference all packages path in the angular.json file.

Note: Make sure you reference it under the build node.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "custom-search": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/custom-search",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "custom-search:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "custom-search:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "custom-search: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",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "custom-search:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "custom-search:serve:production"
            }
          }
        }
      }
    }},
  "defaultProject": "custom-search"
}

That’s it.

Also, check Custom Searching In Angular